#animation {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    justify-content: center;
}

.slot {
    width: 30%; /* Größe der slot "walzen" */
    max-width: 250px; /*maximale größe der slot "walzen" */
    aspect-ratio: 1/1; /*sorgt dafür das immer quadratisch" */
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: grey;
    overflow: hidden;
}

.slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.wintext {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 30px;
    align-items: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: underline;
}

.wintext span {
    word-wrap: break-word; /* falls zu lang */
    white-space: normal; /* Umbrüche erlauben */
    max-width: 75%;
}

/*Animation für win */
.win {
    display: inline-block;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: gold;
    text-shadow: 
        0 0 5px #fff, 
        0 0 10px gold, 
        0 0 20px orange, 
        0 0 30px red;
    animation: win 1s infinite alternate;
    margin-top: 5px;
    margin-bottom: 5px;
}

@keyframes win {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Animation für halfwin */
.halfwin {
    display: inline-block;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: silver;
    text-shadow: 
        0 0 3px #c9c9c9, 
        0 0 6px #66625f, 
        0 0 12px #ffffff;
    animation: halfwin 1s infinite alternate;
    margin-top: 5px;
    margin-bottom: 5px;
}

@keyframes halfwin {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.02);
        opacity: 0.85;
    }
}

/*Animation für loose*/
.lose {
    display: inline-block;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: red;
    text-shadow: 
        0 0 3px #c9c9c9, 
        0 0 6px #66625f, 
        0 0 12px #ffffff;
    animation: loose 1.5s infinite alternate;
    margin-top: 5px;
    margin-bottom: 5px;
}

@keyframes loose {
  0% {
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    filter: blur(2px);
    opacity: 0.8;
  }
}

.buttonspin {
   background-color: #21242b;
   min-width: 75px;
   max-width: 275px;
   height: 30px;
   margin: 5px;
   margin-bottom: 10px;
   font-size: 18px;
   font-weight: bold;
   color: #D0D8D2;
   border: solid 2px;
   border-color: #71248a;
}

.buttonspin:hover {
    background-color: #353a44;
    box-shadow: 0 6px 8px 0 rgba(0, 00, 0, 0.85), 0 10px 25px 0 rgba(0, 0, 0, 0.45);
}

.buttonspin:disabled {
    border: solid 2px ;
    border-color: rgb(88, 88, 88);
    background-color: #2f3642;
    cursor: not-allowed;
    box-shadow: none;
}

.inputwager {
    background-color: #21242b;
    min-width: 110px;
    max-width: 120px;
    height: 25px;
    border: dotted 1px;
    border-color: aqua;
    
}

.credits {
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.resetcredits {
    height: 25px;
    background-color: #21242b;
    font-weight: bold;
    margin-bottom: 10px;
    color: #D0D8D2;
    border: solid 2px;
    border-color: #71248a;
}

.resetcredits:hover {
    background-color: #353a44;
    box-shadow: 0 6px 8px 0 rgba(0, 00, 0, 0.85), 0 10px 25px 0 rgba(0, 0, 0, 0.45);
}

.themebutton{
   height: 40px;
   min-width: 150px;
   max-width: 300px;
   font-weight: bold;
   background-color: #21242b;
   margin: 3px;
   font-size: 15px;
   color: #D0D8D2;
   border: solid 2px;
   border-color: #71248a;
}

.themebutton:hover{
    background-color: #353a44;
    box-shadow: 0 6px 8px 0 rgba(0, 00, 0, 0.85), 0 10px 25px 0 rgba(0, 0, 0, 0.45);
}

.themebutton:disabled{
    border: solid 2px ;
    border-color: rgb(88, 88, 88);
    background-color: #2f3642;
    cursor: not-allowed;
    box-shadow: none;
}

.themebuttonactive{
   height: 40px;
   width: 150px;
   font-weight: bold;
   background-color: #21242b;
   margin: 3px;
   color: #D0D8D2;
   border: dotted 4px;
   border-color: #00f7ff;
}

.winchart {
  display: flex;
  flex-direction: column; /* untereinander */
  align-items: center;    /* mittig ausrichten */
  max-width: 100%;        /* Container darf nie breiter als Bildschirm */
  overflow: hidden;       /* falls mal was übersteht */
}

.winchart img {
  width: 100%;        /* Bild passt sich an Containerbreite an */
  height: auto;       /* Höhe automatisch nach Seitenverhältnis */
  max-width: 600px;  /* nie größer als Originalgröße */
  margin-bottom: 15px; /* kleiner Abstand zwischen den beiden */
}