/* BOTAO PRATA */
.btn-prata {
  background-color: #C0C0C0;
  background-image: linear-gradient(
    to bottom,
    #FFFFFF 0%,
    #E0E0E0 25%, 
    #B0B0B0 50%,
    #D0D0D0 75%, 
    #A0A0A0 100%
  );  
  border: 1px solid #777777;   
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 5px rgba(0, 0, 0, 0.4);    
  color: #333;
  padding: 7px 12px;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
}
.btn-prata:hover {
  background: #b2afaf;  
}

/* PLAY PRATA */
.play-prata {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative; 
  cursor: pointer;
  
  background-color: #C0C0C0; 
  background-image: linear-gradient(
    to bottom,
    #FFFFFF 0%,  
    #E0E0E0 25%, 
    #B0B0B0 50%,   
    #D0D0D0 75%, 
    #A0A0A0 100%  
  );
  
  border: 4px solid #777777; 
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.9), 
    0 8px 15px rgba(0, 0, 0, 0.5);      
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.play-prata::after {
  content: '\25B6'; 
  color: #000000; 
  font-size: 20px; 
  line-height: 1; 
  transform: translateX(5%); 
}

.play-prata:hover {
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.9), 
    0 0 25px rgba(200, 200, 200, 0.8), 
    0 8px 20px rgba(0, 0, 0, 0.6);            
    
  transform: scale(1.05); 
}

/* RESET PRATA */
.reset-prata {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative; 
  cursor: pointer;
  
  background-color: #C0C0C0; 
  background-image: linear-gradient(
    to bottom,
    #FFFFFF 0%,  
    #E0E0E0 25%, 
    #B0B0B0 50%, 
    #D0D0D0 75%, 
    #A0A0A0 100% 
  );
  
  border: 4px solid #777777;
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.9),
    0 8px 15px rgba(0, 0, 0, 0.5);
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.reset-prata::after {
  content: '\21BB';
  color: #000000;
  font-size: 20px; 
  line-height: 1; 
  transform: none;
}

.reset-prata:hover {
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.9), 
    0 0 25px rgba(200, 200, 200, 0.8),
    0 8px 20px rgba(0, 0, 0, 0.6);            
    
  transform: scale(1.05); 
}

/* BOTAO DIAMANTE */
.btn-diamante {
  background-color: #F0F8FF;  
  background-image: linear-gradient(
    to bottom,
    #FFFFFF 0%,
    #E6F0FF 15%,       
    #D0E0FF 35%,
    #FFFFFF 50%,
    #BBDDFF 65%,       
    #99CCFF 85%,
    #FFFFFF 100%
  );  
  border: 1px solid #B0C4DE;   
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(100, 150, 200, 0.5),
    0 0 15px rgba(100, 150, 255, 0.7);
    
  color: #0044AA;
  padding: 7px 12px;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}

.btn-diamante:hover {
  background: #dae9f7;  
}

/* RESET DIAMANTE */
.reset-diamante {
  width: 35px;
  height: 35px;
  border-radius: 50%; 
  position: relative; 
  cursor: pointer;
  
  background-color: #F0F8FF; 
  background-image: linear-gradient(
    to bottom,
    #FFFFFF 0%,       
    #E6F0FF 15%,       
    #D0E0FF 35%,     
    #FFFFFF 50%,    
    #BBDDFF 65%,       
    #99CCFF 85%,  
    #FFFFFF 100%   
  );
  
  border: 4px solid #B0C4DE; 
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 1),     
    inset 0 -1px 0 rgba(100, 150, 200, 0.5),     
    0 0 15px rgba(100, 150, 255, 0.7);            
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.reset-diamante::after {
  content: '\21BB'; 
  color: #0044AA;  
  font-size: 20px; 
  line-height: 1; 
  transform: none; 
}

.reset-diamante:hover {
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(100, 150, 200, 0.5),
    0 0 30px rgba(100, 150, 255, 1); 
    
  transform: scale(1.05); 
}

/* PLAY DIAMANTE */
.play-diamante {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative; 
  cursor: pointer;
  
  background-color: #F0F8FF; 
  background-image: linear-gradient(
    to bottom,
    #FFFFFF 0%,   
    #E6F0FF 15%,       
    #D0E0FF 35%,     
    #FFFFFF 50%,       
    #BBDDFF 65%,       
    #99CCFF 85%,      
    #FFFFFF 100%     
  );
  
  border: 4px solid #B0C4DE; 
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 1),    
    inset 0 -1px 0 rgba(100, 150, 200, 0.5),     
    0 0 15px rgba(100, 150, 255, 0.7);      
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.play-diamante::after {
  content: '\25B6'; 
  color: #0044AA;
  font-size: 20px; 
  line-height: 1; 
  transform: translateX(5%); 
}

.play-diamante:hover {
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(100, 150, 200, 0.5),
    0 0 30px rgba(100, 150, 255, 1);   
    
  transform: scale(1.05); 
}

/* BOTAO MADEIRA VELHA ESCURA */
.btn-madeira-velha-escura {
  background-color: #7B5C35; 
  background-image: linear-gradient(
    90deg,
    #7B5C35 0%,
    #8D6E4A 5%,
    #5E4528 10%,
    #8D6E4A 15%,
    #7B5C35 25%,
    #6A523A 40%,
    #7B5C35 60%,
    #5E4528 80%,
    #7B5C35 100%
  );  

  border: 2px solid #3D2918; 

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),    
    0 4px 6px rgba(0, 0, 0, 0.6);

  color: #F0E6D8;
  padding: 7px 12px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

a.btn-madeira-velha-escura {
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
  line-height: 22px;
  height: 33px;
  font-size: 13px;

  background-color: #7B5C35; 
  background-image: linear-gradient(
    90deg,
    #7B5C35 0%,
    #8D6E4A 5%,
    #5E4528 10%,
    #8D6E4A 15%,
    #7B5C35 25%,
    #6A523A 40%,
    #7B5C35 60%,
    #5E4528 80%,
    #7B5C35 100%
  );  

  border: 2px solid #3D2918; 

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),    
    0 4px 6px rgba(0, 0, 0, 0.6);

  color: #F0E6D8;
  padding: 3px 12px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);

  cursor: pointer;
}

.btn-madeira-velha-escura:hover {
   background: #7e5b31;  
}

/* RESET MADEIRA VELHA ESCURA  */
.reset-madeira-velha-escura {
  width: 35px;
  height: 35px;
  border-radius: 50%; 
  position: relative; 
  cursor: pointer;
  
  background-color: #7B5C35;
  background-image: linear-gradient(
    90deg,
    #7B5C35 0%,
    #8D6E4A 5%,
    #5E4528 10%,
    #8D6E4A 15%,
    #7B5C35 25%,
    #6A523A 40%,
    #7B5C35 60%,
    #5E4528 80%, 
    #7B5C35 100%
  );
  
  border: 4px solid #8D6E4A;

  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 4px 6px rgba(0, 0, 0, 0.6); 
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.reset-madeira-velha-escura::after {
  content: '\21BB';
  color: #F0E6D8;
  font-size: 20px; 
  line-height: 1; 
  transform: none; 
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.reset-madeira-velha-escura:hover {  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1), 
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 10px rgba(100, 70, 40, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.8); 
    
  transform: scale(1.05); 
}

/* PLAY MADEIRA VELHA ESCURA  */
.play-madeira-velha-escura {
  width: 35px;
  height: 35px;
  border-radius: 50%; 
  position: relative; 
  cursor: pointer;
  
  background-color: #7B5C35;
  background-image: linear-gradient(
    90deg,
    #7B5C35 0%,
    #8D6E4A 5%,
    #5E4528 10%,
    #8D6E4A 15%,
    #7B5C35 25%,
    #6A523A 40%,
    #7B5C35 60%,
    #5E4528 80%,
    #7B5C35 100%
  );
  
  border: 4px solid #8D6E4A;

  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 4px 6px rgba(0, 0, 0, 0.6); 
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.play-madeira-velha-escura::after {
  content: '\25B6';
  color: #F0E6D8;
  font-size: 20px; 
  line-height: 1; 
  transform: translateX(5%); 
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.play-madeira-velha-escura:hover { 
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1), 
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 10px rgba(100, 70, 40, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.8); 

  transform: scale(1.05); 
}

/* BOTAO MADEIRA VELHA */
.btn-madeira-velha {  
  background-color: #CDBBA7;  
  background-image: linear-gradient(
    90deg,
    #CDBBA7 0%,
    #E1D3C8 8%,
    #B5A599 15%,
    #E1D3C8 20%, 
    #CDBBA7 30%,
    #B5A599 45%,
    #CDBBA7 65%,
    #D0C0B0 85%,
    #CDBBA7 100%
  );
  
  border: 2px solid #8B7360; 
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 4px 6px rgba(0, 0, 0, 0.4);
    
  color: #3D2918;
  padding: 7px 12px;
  border-radius: 4px; 
  text-align: center;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
   text-decoration: none;
}

.btn-madeira-velha:hover {
  background: #bba792; 
}

/* PLAY MADEIRA VELHA */
.play-madeira-velha {
  width: 50px;
  height: 50px;
  border-radius: 50%; 
  position: relative; 
  cursor: pointer;  
  
  background-color: #CDBBA7;
  background-image: linear-gradient(
    90deg, 
    #CDBBA7 0%,
    #E1D3C8 8%,
    #B5A599 15%,
    #E1D3C8 20%, 
    #CDBBA7 30%,
    #B5A599 45%,
    #CDBBA7 65%,
    #D0C0B0 85%, 
    #CDBBA7 100%
  );
  
  border: 4px solid #8B7360;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 4px 6px rgba(0, 0, 0, 0.4); 
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.play-madeira-velha::after {
  content: '\25B6'; 
  color: #3D2918;
  font-size: 20px; 
  line-height: 1; 
  transform: translateX(5%); 
}

.play-madeira-velha:hover {
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 10px rgba(180, 180, 180, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.6); 
  transform: scale(1.05); 
}

/* RESET MADEIRA VELHA */
.reset-madeira-velha {
  width: 35px;
  height: 35px;
  border-radius: 50%; 
  position: relative; 
  cursor: pointer;
  
  background-color: #CDBBA7;
  background-image: linear-gradient(
    90deg, 
    #CDBBA7 0%,
    #E1D3C8 8%,
    #B5A599 15%,
    #E1D3C8 20%, 
    #CDBBA7 30%,
    #B5A599 45%,
    #CDBBA7 65%,
    #D0C0B0 85%, 
    #CDBBA7 100%
  );
  
  border: 4px solid #8B7360;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 4px 6px rgba(0, 0, 0, 0.4); 
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.reset-madeira-velha::after {
  content: '\21BB';
  color: #3D2918;
  font-size: 20px; 
  line-height: 1; 
  transform: none;
}

.reset-madeira-velha:hover {
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 10px rgba(180, 180, 180, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.6); 
  transform: scale(1.05); 
}

/* BOTÃO STOP – MADEIRA VELHA */
.stop-madeira-velha {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;

  background-color: #CDBBA7;
  background-image: linear-gradient(
    90deg,
    #CDBBA7 0%,
    #E1D3C8 8%,
    #B5A599 15%,
    #E1D3C8 20%,
    #CDBBA7 30%,
    #B5A599 45%,
    #CDBBA7 65%,
    #D0C0B0 85%,
    #CDBBA7 100%
  );

  border: 4px solid #8B7360;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 4px 6px rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

/* ÍCONE STOP (quadrado) */
.stop-madeira-velha::before {
  content: "";
  width: 12px;
  height: 12px;
  background: #4a3b2f;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* FEEDBACK DE CLIQUE */
.stop-madeira-velha:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.35);
}

/* BOTAO OURO */
.btn-ouro {
  background-color: #FFD700; 
  
  background-image: linear-gradient(
    to bottom,
    #FFF8DC 0%,
    #FFEB99 25%, 
    #FFD700 50%,
    #C0B54B 75%, 
    #A08C00 100%
  );
  
  border: 1px solid #998800; 
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 8px rgba(0, 0, 0, 0.6);
    
  color: #333;
  padding: 7px 12px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}

.btn-ouro:hover {
  background: #debe04; 
}

/* PLAY OURO */
.play-ouro {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  
  background-color: #FFD700; 
  background-image: linear-gradient(
    to bottom,
    #FFF8DC 0%, 
    #FFEB99 25%, 
    #FFD700 50%,   
    #C0B54B 75%, 
    #A08C00 100%   
  );
  
  border: 4px solid #998800;
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.9),
    0 8px 15px rgba(0, 0, 0, 0.5);
    
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-ouro::after {
  content: '\25B6';
  color: #000000;
  font-size: 20px;
  line-height: 1;
  
  transform: translateX(5%); 
}

.play-ouro:hover {
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.9),
    0 0 25px rgba(255, 215, 0, 0.8),
    0 8px 20px rgba(0, 0, 0, 0.6);
    
  transform: scale(1.05); 
}

/* RESET OURO */
.reset-ouro {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative; 
  cursor: pointer;
  
  background-color: #FFD700; 
  background-image: linear-gradient(
    to bottom,
    #FFF8DC 0%, 
    #FFEB99 25%, 
    #FFD700 50%,   
    #C0B54B 75%, 
    #A08C00 100%   
  );

  border: 4px solid #998800; 
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.9), 
    0 8px 15px rgba(0, 0, 0, 0.5); 
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.reset-ouro::after {
  content: '\21BB';
  color: #000000;  
  font-size: 20px;
  line-height: 1;  
  transform: none; 
}

.reset-ouro:hover {
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.7), 
    0 0 25px rgba(214, 199, 81, 0.8),
    0 8px 20px rgba(0, 0, 0, 0.6);           
  transform: scale(1.05); 
}

/* BOTAO BROZE */
.btn-bronze {
  background-color: #CD7F32; 
  
  background-image: linear-gradient(
    to bottom,
    #EAA975 0%,
    #D2975B 25%, 
    #B87333 50%,
    #A05E23 75%, 
    #7A4B1D 100%
  );
  
  border: 1px solid #5C3A1A; 
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.5);
    
  color: #FFFFFF;
  padding: 7px 12px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.btn-bronze:hover {
  background: #b36f2c; 
}

/* PLAY BRONZE */
.play-bronze {
  width: 35px;
  height: 35px;
  border-radius: 50%; 
  position: relative; 
  cursor: pointer;
  
  background-color: #CD7F32;
  background-image: linear-gradient(
    to bottom,
    #EAA975 0%,
    #D2975B 25%, 
    #B87333 50%,
    #A05E23 75%, 
    #7A4B1D 100%
  );  
  
  border: 4px solid #5C3A1A;
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.5),
    0 8px 15px rgba(0, 0, 0, 0.5);
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.play-bronze::after {
  content: '\25B6';
  color: #ffffff;  
  font-size: 20px; 
  line-height: 1;  
  transform: translateX(5%); 
}

.play-bronze:hover {
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.7),
    0 0 25px rgba(205, 127, 50, 0.8),
    0 8px 20px rgba(0, 0, 0, 0.6);
  transform: scale(1.05); 
}

.play-bronze:hover {
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.9), 
    0 0 24px rgba(255, 215, 0, 0.8),         
    0 8px 20px rgba(0, 0, 0, 0.6);           
    
  transform: scale(1.05); 
}

/* RESET BRONZE */
.reset-bronze {
  width: 35px;
  height: 35px;
  border-radius: 50%; 
  position: relative; 
  cursor: pointer;
  background-color: #CD7F32;
  background-image: linear-gradient(
    to bottom,
    #EAA975 0%,
    #D2975B 25%, 
    #B87333 50%,
    #A05E23 75%, 
    #7A4B1D 100%
  );
  
  border: 4px solid #5C3A1A;
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.5),
    0 8px 15px rgba(0, 0, 0, 0.5);
    
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out; 
}

.reset-bronze::after {
  content: '\21BB';
  color: #ffffff;  
  font-size: 20px; 
  line-height: 1;  
  transform: none; 
}

.reset-bronze:hover {
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.7), 
    0 0 25px rgba(205, 127, 50, 0.8),
    0 8px 20px rgba(0, 0, 0, 0.6);           
  transform: scale(1.05); 
}