body {
  margin: 0;
  min-height: 100vh;
  background: #e8d9c5;                /* fundo papel velho / vintage */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', sans-serif;
}

.container {
  perspective: 800px;                   /* dá profundidade 3D */
}

.pega {
  position: relative;
  width: 60px;
  height: 180px;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-15deg); /* leve inclinação vintage */
}

/* Corpo principal da pega (duas pernas de madeira) */
.perna {
  position: absolute;
  width: 28px;
  height: 100%;
  background: linear-gradient(
    135deg,
    #8b6f47 0%,
    #a68a64 20%,
    #c4a484 45%,
    #b89770 70%,
    #8b6f47 100%
  );
  border-radius: 14px 14px 6px 6px;
  box-shadow:
    inset 0 8px 12px rgba(0,0,0,0.35),     /* sombra interna madeira */
    inset -6px -10px 15px rgba(255,240,200,0.25), /* luz amarelada */
    0 12px 25px rgba(0,0,0,0.5),
    0 0 0 1px #5c4328;                    /* contorno escuro */
}

.perna.esquerda  { left: 0; }
.perna.direita   { right: 0; }

/* Parte superior arredondada (cabeça da pega) */
.topo {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 38px;
  background: #9c7c58;
  border-radius: 24px 24px 0 0;
  box-shadow:
    inset 0 6px 10px rgba(0,0,0,0.4),
    0 8px 18px rgba(0,0,0,0.45);
  z-index: 2;
}

/* Mola / mola central (efeito metálico enferrujado) */
.mola {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 90px;
  background: radial-gradient(circle at 30% 30%, #d4a017, #b58900 40%, #8b6914 80%);
  border-radius: 18px;
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,0.6),
    inset 0 -4px 8px rgba(255,255,180,0.2),
    0 0 0 2px #6b4e10,
    4px 4px 12px rgba(0,0,0,0.5);
  z-index: 1;
}

/* Textura de madeira envelhecida (ruído + grão) */
.pega::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" /><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.15"/></svg>');
  pointer-events: none;
  mix-blend-mode: multiply;
  border-radius: inherit;
  z-index: 3;
}

/* Efeito de uso / arranhões leves */
.pega::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    transparent 40%,
    rgba(120,80,40,0.15) 45%,
    transparent 55%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
}

/* Texto decorativo opcional (estilo carimbo antigo) */
.label {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(-12deg);
  color: #4a2f0f;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  opacity: 0.7;
  text-shadow: 1px 1px 0 #fff8e1;
  pointer-events: none;
  z-index: 5;
}

/* Hover / interação simples */
.pega:hover {
  transform: scale(1.08) rotateX(15deg) rotateY(-20deg);
  transition: all 0.4s ease;
}