*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1e1e1e;
    color:#fff;
    overflow: hidden;
    overflow-x: hidden;
}

/* Стили для slot-machine-container и slot-machine */
.slot-machine-container {
  max-width: 400px;
  width: 100%;
  margin: 40px auto;
  background: rgba(255,255,255,0.07);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: 24px 12px;
  box-sizing: border-box;
}

.slot-machine {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 350px;
  margin: 0 auto 16px auto;
}

.reel{
    max-width: 150px;
    min-width: 100px;
    max-height: 150px;
    min-height: 100px;
    overflow: hidden;
    display:flex;
    justify-content: center;
    position: relative;
}

.reel img{
    width:100px;
    height: 100px;
    position: absolute;
    transition: transform 0.3s ease;
}

#handle{
    margin-top: 20px;
    padding: 12px 25px;
    font-size: 1.2em;
    cursor: pointer;
    background-color: #ff4747;
    color:#fff;
    border:none;
    border-radius: 10px;
}

#message{
    position: fixed;
    top:100px;
    font-size:1.5em;
    color:#ffdf00;
    font-weight: bold;
}

.loss{
    background-color: #ff0000;
}

.win{
    background-color: greenyellow;
}

.confetti{
    position: absolute;
    width:10px;
    height:10px;
    background-color: #ffc107;
    animation: fall 1.5s linear infinite;
    border-radius: 50%;
}

@keyframes fall{
    0%{
        transform: translate(0) rotate(0deg);
        opacity: 1;
    }

    100%{
        transform: translate(100vh) rotate(360deg);
        opacity: 0;
    }
}

@media (max-width: 600px) {
  .slot-machine-container {
    max-width: 98vw;
    padding: 10vw 2vw;
  }
  .slot-machine {
    max-width: 98vw;
    gap: 4vw;
  }
  .reel img {
    max-width: 22vw;
  }
}