@font-face {
	  font-family: 'Orbitron';
	  src: url('webfonts/orbitron-v31-latin-500.woff2') format('woff2');
	  font-weight: 500;
	  font-style: normal;
	  font-display: swap;
	}
	
	.slot-machine-wrapper {
	  color: #fff;
	  font-family: 'Orbitron', sans-serif;
	  min-height: 50vh;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

    .slot-machine {
      background: #333333;
      border: 5px solid #FF4FF0;
      border-radius: 20px;
      width: 90%;
	  max-width: 360px;
      padding: 20px;
      margin: 20px;
      text-align: center;
      box-shadow: 0 0 20px #ffffff;
    }

    h2 {
      color: #558DDC;
      margin-bottom: 20px;
	  text-shadow:
		-1px -1px 0 #000000,
		 1px -1px 0 #000000,
		-1px  1px 0 #000000,
		 1px  1px 0 #000000;
		}

    .slots {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .slot-symbol {
      width: clamp(60px, 20vw, 80px);
	  height: clamp(60px, 20vw, 80px);
      border: 2px solid #fff;
      border-radius: 10px;
      background: #000;
      box-shadow: inset 0 0 10px #aaa;
    }

    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    button {
      padding: 10px 20px;
      background: #ff4ff0;
      border: none;
      color: #fff !important;
      font-size: 16px;
      font-weight: bold;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 0 10px #ffccff;
      transition: background 0.3s;
    }

    button:hover {
      background: #ff4ff0;
	  color: #FFCC99 !important;
	  box-shadow: 0 0 20px #FF80FF;
      transition: background 0.3s;
    }

    .money-display {
      margin-top: 15px;
	  color: #558DDC !important;
	  font-weight: bold;
	  text-shadow:
		-1px -1px 0 #000000,
		 1px -1px 0 #000000,
		-1px  1px 0 #000000,
		 1px  1px 0 #000000;
    }

    .money-display input {
      background: #555555;
      border: none;
      color: #fff;
      text-align: center;
      font-size: 18px;
      width: 150px;
      margin-top: 5px;
    }

    .spin {
      animation: spin 0.3s linear 4;
    }

    @keyframes spin {
      0% { transform: scale(1) rotate(0deg); }
      50% { transform: scale(1.1) rotate(10deg); }
      100% { transform: scale(1) rotate(0deg); }
    }
	
	@media (max-width: 480px) {
	  button {
		font-size: 14px;
		padding: 8px 16px;
	  }

	  .money-display input {
		font-size: 16px;
		width: 80px;
	  }
	}