/* =========================================================================
   BourgPoket — Claw Machine Enhancement Layer (v1)
   Overrides the .claw-* classes for a richer, premium arcade look.
   Loaded AFTER index-*.css so same-specificity rules win by order.
   Additive & reversible (delete this file + its <link>).
   ========================================================================= */

:root {
  --claw-gold: #d4af37;
  --claw-gold-lt: #f3d984;
  --claw-gold-hi: #fff2c2;
  --claw-chrome-hi: #fdfdfd;
  --claw-chrome-mid: #c8ccd4;
  --claw-chrome-lo: #6b7079;
  --claw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Cabinet : profondeur, halo ambiant, sol ------------------------- */
.claw-cabinet {
  border-radius: 22px;
  padding: 12px 12px 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(212, 175, 55, 0.22), transparent 60%),
    linear-gradient(180deg, #2a2118 0%, #16110b 40%, #0c0a07 100%);
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6) inset,
    0 2px 0 rgba(255, 255, 255, 0.06) inset,
    0 40px 80px -30px rgba(0, 0, 0, 0.95),
    0 0 60px rgba(212, 175, 55, 0.14);
  position: relative;
}
/* Pieds de la borne */
.claw-cabinet::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -14px;
  height: 14px;
  background: linear-gradient(180deg, #0c0a07, #000);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.9);
  z-index: -1;
}

/* ---- Fronton (marquee) : couronne + enseigne lumineuse --------------- */
.claw-marquee {
  height: 50px;
  gap: 16px;
  border-radius: 16px 16px 4px 4px;
  background:
    linear-gradient(180deg, #241d14, #120d08);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-bottom: none;
  box-shadow:
    0 0 24px rgba(212, 175, 55, 0.18) inset,
    0 2px 0 rgba(255, 255, 255, 0.05) inset;
}
.claw-marquee-title {
  font-size: 14px;
  letter-spacing: 5px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--claw-gold-hi), var(--claw-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7));
  animation: claw-sign-flicker 4.5s var(--claw-ease) infinite;
}
/* Guirlande d'ampoules animée */
.claw-marquee-lights {
  height: 8px;
  border-radius: 4px;
  background-image: radial-gradient(circle, var(--claw-gold-lt) 36%, transparent 42%);
  background-size: 16px 8px;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.8));
  animation: claw-lights 0.55s steps(2) infinite;
}
.claw-marquee-lights:last-of-type { animation-delay: 0.27s; }

/* ---- Vitre : reflets, vignette, balayage lumineux ------------------- */
.claw-glass {
  height: 300px;
  background:
    radial-gradient(130% 90% at 50% -5%, rgba(212, 175, 55, 0.16), transparent 55%),
    radial-gradient(100% 100% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 60%),
    linear-gradient(180deg, rgba(26, 34, 48, 0.65), rgba(6, 8, 12, 0.92));
  border-left: 1px solid rgba(212, 175, 55, 0.28);
  border-right: 1px solid rgba(212, 175, 55, 0.28);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.75),
    inset 0 2px rgba(255, 255, 255, 0.1),
    inset 0 -30px 50px -20px rgba(0, 0, 0, 0.8);
}
/* Verre brillant : reflet diagonal qui balaie en boucle */
.claw-glass-shine {
  top: -40%;
  left: -60%;
  width: 45%;
  height: 180%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 70%
  );
  transform: rotate(8deg);
  animation: claw-glass-sweep 7s var(--claw-ease) infinite;
}

/* ---- Rail métallique avec boulons ---------------------------------- */
.claw-rail2 {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffe9a8, #d4af37 45%, #8a6f24);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 8px rgba(212, 175, 55, 0.3);
}
.claw-rail2::before,
.claw-rail2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #8a6f24);
  transform: translateY(-50%);
}
.claw-rail2::before { left: -2px; }
.claw-rail2::after { right: -2px; }

/* ---- Câble + treuil ------------------------------------------------- */
.claw-cable {
  top: -26px;
  height: 30px;
  width: 3px;
  background: linear-gradient(180deg, #8a6f24, #d4af37);
  box-shadow: 0 0 4px rgba(212, 175, 55, 0.5);
}
.claw-cable::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--claw-chrome-mid), var(--claw-chrome-lo));
  transform: translateX(-50%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ---- Pince chromée (3 doigts) -------------------------------------- */
.claw-rig { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); }
.claw-pincer {
  width: 15px;
  height: 20px;
  border: 2px solid transparent;
  border-radius: 8px 0 0 12px;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.3), transparent) border-box;
  border-color: var(--claw-gold);
  box-shadow:
    inset 0 0 4px rgba(255, 242, 194, 0.5),
    0 0 6px rgba(212, 175, 55, 0.35);
}
.claw-pincer.left { border-right: none; }
.claw-pincer.right { border-left: none; }
/* Doigt central */
.claw-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 14px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--claw-chrome-hi), var(--claw-chrome-lo));
  border-radius: 0 0 3px 3px;
  z-index: 1;
}
/* Moyeu chromé qui relie les doigts */
.claw-head::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 22px;
  height: 10px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--claw-chrome-hi) 0%, var(--claw-chrome-mid) 45%, var(--claw-chrome-lo) 100%);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.7);
  z-index: 2;
}
.claw-prize {
  width: 36px;
  height: 46px;
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.6);
  animation: claw-prize-sway 0.9s ease-in-out infinite;
}

/* ---- Capsules : brillance + flottement ----------------------------- */
/* Alignement : on annule le padding latéral du rail à capsules pour que
   la pince (positionnée en % de la vitre) tombe pile sur la bonne capsule. */
.claw-glass .justify-around {
  padding-left: 0;
  padding-right: 0;
}
.claw-capsule {
  width: 58px;
  height: 76px;
  border-radius: 50% 50% 46% 46% / 38% 38% 62% 62%;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: #0e0c09;
  box-shadow:
    0 8px 16px -6px rgba(0, 0, 0, 0.85),
    inset 0 0 14px rgba(0, 0, 0, 0.7),
    inset 0 3px 6px rgba(255, 255, 255, 0.12);
  position: relative;
  animation: claw-capsule-bob 3.2s ease-in-out infinite;
}
/* Reflet brillant sur la capsule */
.claw-capsule::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 16%;
  width: 34%;
  height: 26%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  filter: blur(1px);
  pointer-events: none;
  z-index: 2;
}
.claw-glass .justify-around > div:nth-child(2) .claw-capsule { animation-delay: 0.4s; }
.claw-glass .justify-around > div:nth-child(3) .claw-capsule { animation-delay: 0.8s; }
.claw-glass .justify-around > div:nth-child(4) .claw-capsule { animation-delay: 1.2s; }
.claw-glass .justify-around > div:nth-child(5) .claw-capsule { animation-delay: 1.6s; }

/* ---- Goulotte de sortie -------------------------------------------- */
.claw-chute {
  width: 70px;
  height: 18px;
  border-radius: 8px 8px 0 0;
  background: radial-gradient(80% 120% at 50% 100%, #000, #0a0806);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-bottom: none;
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.9);
}

/* ---- Pupitre + monnayeurs ------------------------------------------ */
.claw-deck {
  padding: 20px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, #1c170f, #0b0907);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-top: none;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.04) inset;
}
.claw-coin-slot {
  height: 34px;
  background: linear-gradient(180deg, #060504, #1a1510);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: inset 0 0 6px #000, 0 0 6px rgba(212, 175, 55, 0.15);
}

/* ---- Bouton Jouer : or brossé + balayage --------------------------- */
.claw-button {
  padding: 15px 36px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.claw-button-ready {
  background: linear-gradient(180deg, var(--claw-gold-hi), var(--claw-gold-lt) 35%, var(--claw-gold) 100%);
  border-color: var(--claw-gold-lt);
  box-shadow:
    0 0 26px rgba(212, 175, 55, 0.5),
    0 8px 18px -8px rgba(0, 0, 0, 0.8),
    inset 0 1px rgba(255, 255, 255, 0.7);
}
.claw-button-ready::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: claw-btn-shine 2.6s var(--claw-ease) infinite;
}
.claw-button-ready:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ---- Révélation : anneau radial + confettis ------------------------ */
.claw-reveal {
  animation: claw-pop 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
/* halo rotatif derrière la carte gagnée */
.claw-reveal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.18) 40deg,
    transparent 80deg,
    rgba(212, 175, 55, 0.18) 120deg,
    transparent 160deg,
    rgba(212, 175, 55, 0.18) 200deg,
    transparent 240deg,
    rgba(212, 175, 55, 0.18) 280deg,
    transparent 320deg
  );
  pointer-events: none;
  z-index: 0;
  animation: claw-ray-spin 8s linear infinite;
}
.claw-spark {
  width: 6px;
  height: 6px;
  top: 6%;
  background: var(--claw-gold-lt);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.95);
  animation: claw-spark-fall 1.3s ease-in forwards;
}
.claw-spark:nth-child(3n) { background: #ff8fae; box-shadow: 0 0 10px rgba(255, 143, 174, 0.9); width: 5px; height: 5px; }
.claw-spark:nth-child(3n + 1) { background: #8fd0ff; box-shadow: 0 0 10px rgba(143, 208, 255, 0.9); }

/* ---- Keyframes ----------------------------------------------------- */
@keyframes claw-glass-sweep {
  0%, 100% { left: -60%; }
  45%, 55% { left: 130%; }
}
@keyframes claw-sign-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.55; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}
@keyframes claw-capsule-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes claw-prize-sway {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50% { transform: translateX(-50%) rotate(3deg); }
}
@keyframes claw-btn-shine {
  0% { left: -150%; }
  60%, 100% { left: 160%; }
}
@keyframes claw-ray-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- Mouvement réduit : on calme le décoratif ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .claw-glass-shine,
  .claw-marquee-title,
  .claw-marquee-lights,
  .claw-capsule,
  .claw-prize,
  .claw-button-ready::before,
  .claw-reveal::before,
  .claw-spark {
    animation: none !important;
  }
}