body {
 background-color: #133;
 color: #f5a;
 font-size: 20px;
 border: 0;

 height: 100%;
 display: flex;
 flex-direction: column;

 margin: 0;
 font-family: Arial, sans-serif;
 overflow: hidden;
 height: 100vh;
 padding-top: 1px; /* Platz für das obere Menü */
 padding-bottom: 1px; /* Platz für das untere Menü */

 box-sizing: border-box;
}

a {
 color: #ddf;
 text-decoration: none;
}

/*
a:visited {
 color: #ddf;
 text-decoration: none;
}
*/

p {
	margin: 0px;
}

.top_logo_container {
 height: calc(80vw * 180 / 2048);
 text-align: center;
}

.top_logo {
 display: inline-block;
 /*
 z-index: 2;
 position: relative;
 */
 width: 80vw;
 height: calc(80vw * 360 / 2048);
 background-image: url(img/FluffyGamesBanner2025A.webp);
 background-size: contain;
 background-repeat: no-repeat;
 background-origin: center;
}

.parallax {
 background-image: url(img/FluffyGamesBackB2.webp);
 margin: 0px;
 height: 100vh;
 background-attachment: fixed;
 background-repeat: repeat;
 background-origin: center;
 z-index: -5;
 position: absolute;
 left:0px;
 top:0px;
 width:100vw;
}

.parallaxmid {
 background-image: url(img/FluffyGamesBackC2.webp);
 margin: 0px;
 height: 100vh;
 background-attachment: fixed;
 background-repeat: repeat;
 background-origin: center;
 z-index: -10;
 position: absolute;
 left:0px;
 top:0px;
 width:100vw;
}




/* canvas muß # statt . haben */

#starfieldCanvas {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -20;
}






/* Scrollbarer Bereich */
.scroll-container {
 flex: 1;
 overflow-y: auto; /* Vertikales Scrollen erlauben */
 -ms-overflow-style: none; /* Internet Explorer */
 scrollbar-width: none; /* Firefox */
}

/* Scrollbalken verstecken */
.scroll-container::-webkit-scrollbar {
 display: none; /* Chrome, Safari */
}

.content {
 padding: 128px 0 0 0;
}

.bottom-filler {
 height: 128px;
}

.video-container {
	margin: 0px;
	/* position: relative; */
	/* width: auto; */
	text-align: center;
	padding: 0;
}

video {
	margin: 0;
	padding: 0;
	/*
	width: auto;
	height: auto;
	*/
}

@keyframes flimmern { 0%, 100% { opacity: 1; transform: translateX(0); } 50% { opacity: 0; transform: translateX(-2px); } }
.flimmernd-wackelnd { animation: flimmern 0.5s infinite; }



/* Obere Übersicht */
.header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 padding: 8px 4px 4px 4px;
 /* background-color: #f5f5f5; */
 /* background-color: rgba(245, 245, 245, 0.25); */ 
 /* background-color: rgba(248, 65, 248, 0.4); Transparente Hintergrundfarbe */
 /* background: linear-gradient(to bottom, rgba(248,248,248,0.2),rgba(248,65,248,0.2),rgba(65,65,248,0.2), rgba(65,192,192,0.2)); */
 background-color: rgba(0,0,0, 0.25);
 border-bottom: 3px solid #f49;
 font-size: 1.2em;
 z-index: 1000;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

.info, .menu {
 display: flex;
 /* align-items: center; */
 /* gap: 10px; */
 flex:1;
 justify-content: space-evenly;
 
}

.header img.avatar {
 width: 64px;
 height: 64px;
 border-radius: 50%;
}

/* Menü am unteren Rand */
.footer {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 display: flex;
 justify-content: space-around;
 padding: 4px 4px 8px 4px;
 /* background-color: #f5f5f5; */
 /* background-color: rgba(160, 160, 160, 0.4);  */
 /* background-color: rgba(248, 65, 248, 0.4); Transparente Hintergrundfarbe */
 /* background: linear-gradient(to top, rgba(248,248,248,0.2),rgba(248,65,248,0.2),rgba(65,65,248,0.2), rgba(65,192,192,0.2)); */
 background-color: rgba(0,0,0, 0.25);
 border-top: 3px solid #f5a;
 font-size: 1.2em;
 z-index: 1000;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);

 margin-top: auto;
}

/* Link-Styling */
.header a, .footer a {
 text-decoration: none;
 /* color: #ffa;*/
 color: #f5a;
 font-weight: bold;
 /* background: linear-gradient(to bottom, white, white, white, white, yellow, brown); Farbverlauf von gelb nach braun */
 /* background: linear-gradient(to bottom, white, white, white, white, white, turquoise, blue); */
  background: #f5a;
 -webkit-background-clip: text; /* Hintergrund nur auf den Text anwenden */
 -webkit-text-fill-color: transparent; /* Textfarbe transparent machen, damit der Hintergrund sichtbar ist */
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);

}


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



.name-container {

    overflow: hidden;
    white-space: nowrap;
    /* align-items: center; */
    width: 20vw; /* Setzt die Breite auf 25% der Bildschirmbreite */
    max-width: 20vw; /* Optionale Begrenzung auf 25%, falls nötig */
    position: relative;

 
}

.first_name {
 text-decoration: none;
 color: #ffa;
 font-weight: bold;
 /* background: linear-gradient(to bottom, white, yellow, brown); Farbverlauf von gelb nach braun */
  /* background: linear-gradient(to bottom, white, turquoise, blue);*/
  background: #f5a;
 -webkit-background-clip: text; /* Hintergrund nur auf den Text anwenden */
 -webkit-text-fill-color: transparent; /* Textfarbe transparent machen, damit der Hintergrund sichtbar ist */
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
    display: inline-block;
    position: relative;
    transform: translateX(0%);
    animation: scrollText 20s linear infinite;
}


/* Definiere die Scroll-Animation */
@keyframes scrollText {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform: translateX(-100%);
    }
    75% {
        transform: translateX(100%);
   }
    100% {
        transform: translateX(0%);
 
    }
}



.text-box {
 font-size: 1.2em;
 padding: 8px 12px;
 color: #333;
 border-radius: 12px;
 display: inline-block;
 box-shadow:16px 12px 12px rgba(0.5, 0.5, 0.5, 0.9);
 transition: background-color 0.3s ease;
}

.text-box:hover {
 filter: brightness(0.8); /* Abdunkeln beim Hover */
}

.candy-width {
    width: 128px;
}

/* Grundlegendes Styling */
.candy-box, .candy-box a {
 padding: 5px 10px;
 border-radius: 8px;
 color: #EEE; /* Dunklere Textfarbe */
 font-weight: bold;
 font-size: 1.0em;
 display: inline-block;
 margin: 10px;
 background-size: 100%;
 background-blend-mode: overlay;
 text-shadow: 2px 2px 4px rgba(32, 128, 128, 0.9); /* Dunkle Text-Kontur */

}


/* Zuckerstangen-Effekt: rot-weiß */
.candy-box.red {
 border: 3px solid rgba(255, 224, 224, 0.5);
 background: rgba(255, 77, 77, 0.8);
 box-shadow: 0 0 15px rgba(255, 77, 77, 0.9); /* Rot-Weißer Glow */
 
}

/* Zuckerstangen-Effekt: blau-weiß */
.candy-box.blue {
 border: 3px solid rgba(224, 224, 255, 0.5);
 background: rgba(0, 123, 255, 0.8);
 box-shadow: 0 0 15px rgba(0, 123, 255, 0.9); /* Blau-Weißer Glow */
 
}

/* Zuckerstangen-Effekt: grün-weiß */
.candy-box.green {
 border: 3px solid rgba(224, 255, 224, 0.5);
 background: rgba(40, 167, 69, 0.8);
 box-shadow: 0 0 15px rgba(40, 167, 69, 0.9); /* Grün-Weißer Glow */
 
}

/* Zuckerstangen-Effekt: lila-weiß */
.candy-box.purple {
 border: 3px solid rgba(255, 224, 255, 0.5);
 background: rgba(128, 0, 128, 0.8);
 box-shadow: 0 0 15px rgba(128, 0, 128, 0.9); /* Lila-Weißer Glow */

    background-image: 
        linear-gradient(darkviolet, darkviolet),  /* Inneres der Box */
	linear-gradient(darkviolet, white),             /* Weiße Schicht */
        linear-gradient(white, mediumorchid),             /* Weiße Schicht */
        linear-gradient(mediumorchid, turquoise),/* Lila Schicht */
        linear-gradient(turquoise, turquoise);      /* Türkise äußere Schicht */
   
    background-origin: border-box;
    background-clip: border-box;

 
}

/* Zuckerstangen-Effekt: orange-weiß */
.candy-box.orange {
 border: 3px solid rgba(255, 248, 160, 0.5);
 background: rgba(255, 165, 0, 0.8);
 box-shadow: 0 0 15px rgba(255, 165, 0, 0.9); /* Orange-Weißer Glow */

}

/* Zuckerstangen-Effekt: moosgrün-weiß */
.candy-box.mossgreen {
 border: 3px solid rgba(224, 255, 160, 0.5);
 background: rgba(107, 142, 35, 0.8);
 box-shadow: 0 0 15px rgba(107, 142, 35, 0.9); /* Moosgrün-Weißer Glow */
 
}


/* Zuckerstangen-Effekt: moosgrün-weiß */
.candy-box.topten {
 border: 3px solid rgba(255, 240, 160, 0.5);
 background: repeating-linear-gradient(
         15deg,
         rgba(32, 32, 32, 0.8),
         rgba(64, 64, 64, 0.8) 10px,
         rgba(32, 32, 32, 0.8) 20px
       
 ) 0% 0% / 200% 200%;
 box-shadow: 0 0 15px rgba(142, 107, 35, 0.9);
 animation: rotateLeftCandy 5s linear infinite;
}


@keyframes rotateLeftCandy {
 0% {
  background-position: 0% 0%;
 }
 95% {
  background-position: 100% 0%;
 }
 100% {
  background-position: 0% 0%;
 }
}

@keyframes rotateRightCandy {
 0% {
  background-position: 100% 0%;
 }
 95% {
  background-position: 0% 0%;
 }
 100% {
  background-position: 100% 0%;
 }
}

/*	0% { transform: rotate(0deg); } */
/*    	100% { transform: rotate(360deg); } */




/* Grundlegendes Styling für score-box */
.score-box {
  padding: 5px 10px;
  color: #333; /* Basis-Textfarbe, wird für jede Variante überschrieben */
  font-weight: bold;
  font-size: 1.0em;
  display: inline-block;
  margin: 10px;
  
}

/* Rote Variante */
.score-box.red {
  color: rgba(255,192, 192, 0.9);
  text-shadow: 0 0 8px rgba(255, 77, 77, 0.7), 
               0 0 12px rgba(255, 77, 77, 0.5); /* Rot leuchtender Text */
}

/* Blaue Variante */
.score-box.blue {
  color: rgba(128, 192, 255, 0.9);
  text-shadow: 0 0 8px rgba(0, 123, 255, 0.7), 
               0 0 12px rgba(0, 123, 255, 0.5); /* Blau leuchtender Text */
}

/* Grüne Variante */
.score-box.green {
  color: rgba(192, 255, 192, 0.9);
  text-shadow: 0 0 8px rgba(40, 167, 69, 0.7), 
               0 0 12px rgba(40, 167, 69, 0.5); /* Grün leuchtender Text */
}

/* Lila Variante */
.score-box.purple {
  color: rgba(255, 128, 255, 0.9);
  text-shadow: 0 0 8px rgba(128, 0, 128, 0.7), 
               0 0 12px rgba(128, 0, 128, 0.5); /* Lila leuchtender Text */
}

/* Orange Variante */
.score-box.orange {
  color: rgba(255, 248, 160, 0.9);
  text-shadow: 0 0 8px rgba(255, 165, 0, 0.7), 
               0 0 12px rgba(255, 165, 0, 0.5); /* Orange leuchtender Text */
}

/* Moosgrüne Variante */
.score-box.mossgreen {
  color: rgba(224, 255, 160, 0.9);
  text-shadow: 0 0 8px rgba(107, 142, 35, 0.7), 
               0 0 12px rgba(107, 142, 35, 0.5); /* Moosgrün leuchtender Text */
}


.score-box.bigorange {
  color: rgba(255, 248, 160, 0.9);
  text-shadow: 0 0 8px rgba(255, 165, 0, 0.7), 
               0 0 12px rgba(255, 165, 0, 0.5); /* Orange leuchtender Text */
  font-size: 2.0em;
}


.page_spin{

 background: linear-gradient(to bottom,transparent, purple, transparent, transparent, transparent, transparent, transparent, transparent, purple,transparent);
 animation: gradientShift 3s infinite;

  /* Glänzende Partikel */
  overflow: hidden; /* Verhindert, dass Partikel aus der Box ragen */
}
@keyframes gradientShift {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 0%;
  }
}


/* Blinkende Partikel */
.page_spin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Interaktionen nicht blockieren */
  background-image: radial-gradient(circle, rgba(255, 128, 165, 0.5), transparent 90%);
  background-size: 3% 3%; /* Größe der Partikel */
  
}




.wheel-container {
 position: relative;
 max-width: 90vw;
 max-height: 60vh;
 aspect-ratio: 1/1;
 margin: auto;  
}

.wheel {
 width: 60%;
 height: 60%;
 transform: translateX(-33%);
 /* animation: rotate infinite linear; */
}

@keyframes rotate {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

.pointer {
 position: absolute;
 top: 0;
 left: 30%;
 transform: translateX(-50%);
 width: 60%; /* Anpassen je nach Bildgröße */
}

.base {
 position: absolute;
 top: 0;
 left: 0;
 transform: translateY(50%);
 width: 60%; /* Anpassen je nach Bildgröße */
 z-index: -2;
}

.dog {
 position: absolute;
 top: 0;
 left: 60%;
 transform: translateY(77%);
 width: 50%; /* Anpassen je nach Bildgröße */
 z-index: -2;
}

.spinButton {
 position: absolute;
 top: 25%;
 left: 60%;
 transform: translateY(-50%); 
 width: 50%; /* Anpassen je nach Bildgröße */
}

/* Blinke-Animation-für den Pointer */
@keyframes blinker {
 0%, 100% {
    transform: translate(-50%, 0) scale(1);
  }
  50% {
    transform: translate(-50%, 0) scale(1.1);
  }
}
.blinker {
  animation: blinker 0.5s ease-in-out 2; /* Blinkt zweimal */
}








#playerList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}



.high-box {
  border-radius: 15px;
  padding: 2px; /* Mehr Platz für Inhalte */
  font-weight: bold;
  font-size: 1.2em;
  display: flex; /* Flexbox für die innere Anordnung */
  justify-content: space-between; /* Abstand zwischen Name und Punkte */
  align-items: center; /* Vertikale Zentrierung */
  margin: 2px;
  transform: rotateY(90deg); /* Startzustand */
  opacity: 0; /* Unsichtbar */
  transition: transform 0.8s, opacity 0.8s; /* Übergang */
  border: 3px solid transparent; /* Standardborder */
}

/* Wenn sichtbar, wird das Element aufgedreht */
.high-box.visible {
  transform: rotateY(0deg);  /* Flip nach sichtbar */
  opacity: 1;
}


/* Platz 1: Gold */
.high-box.gold {
  background: rgba(255, 215, 0, 0.5); /* Halbhelles Gold */
  background: radial-gradient(circle, #ffd700, #e6b800, #b59400);
  border-color: gold; /* Kräftige Gold-Umrandung */
  color: #000;
  background-size: 200% 200%; /* Für animiertes Marmorieren */
  animation: marbleEffect 0.5s infinite;

}

/* Platz 2: Silber */
.high-box.silver {
  background: rgba(192, 192, 192, 0.5); /* Halbhelles Silber */
  background: radial-gradient(circle, #c0c0c0, #a9a9a9, #808080);
  border-color: silver; /* Kräftige Silber-Umrandung */
  color: #000;
  background-size: 200% 200%; /* Für animiertes Marmorieren */
  animation: marbleEffect 1s infinite;

}

/* Platz 3: Bronze */
.high-box.bronze {
  background: rgba(205, 127, 50, 0.5); /* Halbhelles Bronze */
  background: radial-gradient(circle, #cd853f, #b3722a, #8a531d);
  border-color: #cd7f32; /* Kräftige Bronze-Umrandung */
  color: #fff;
  background-size: 200% 200%; /* Für animiertes Marmorieren */
  animation: marbleEffect 2s infinite;

}

/* Plätze 4–10: Blau */
.high-box.blue {
  background: rgba(30, 144, 255, 0.5); /* Halbhelles Blau */
  background: radial-gradient(circle, #1e90ff, #1a7ad1, #145d9f);
  border-color: #1e90ff; /* Kräftige Blau-Umrandung */
  color: #fff;


}

/* Bild in den Boxen */
.high-box img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
}


.high-box .name {
  flex: 1; /* Nimmt den verfügbaren Platz ein */
  text-align: left; /* Linksbündig */
  margin-left: 10px; /* Abstand nach links */
}

.high-box .score {
  text-align: right; /* Rechtsbündig */
  margin-right: 10px; /* Abstand nach rechts */
  min-width: 60px; /* Reservierter Platz für Punkte */
}

@keyframes marbleEffect {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}





.page_beer_invite {
    position: relative;
    background-image: 
        radial-gradient(circle, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0) 100%),
        url('img/ponka.png');
    background-repeat: repeat; /* Endlose Wiederholung des Bildes */
    background-size: auto; /* Originalgröße des Bildes */
    background-position: center; /* Bild zentrieren */
    background-blend-mode: darken; /* Vermischt den Verlauf und das Bild */
    width: 100%;
    height: 150vh; /* Volle Höhe des Bildschirms */
}









.page {
  /* display: none; */
}


/* Media Queries für kleinere Bildschirme */
@media (max-width: 600px) {
 body, .header, .footer {
  font-size: 1em;
 }

 .candy-box, .candy-box a {
  font-size: 0.8em;
 }

 .header img.avatar {
  width: 12vw;
  height: 12vw;
 }

 .header .menu, .footer {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
 }
}


#nftDisplay div {
    margin-bottom: 8px;
}

h2, h3 {
    margin: 0;
}

/* Flexbox-Tabelle */
.property-table {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 16px;

}

.property-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

}

/* Stile für linke, mittlere und rechte Spalten */
.property-left {
    flex: 1;
    text-align: right;

}

.property-right {
    flex: 1;
    text-align: left;

}

.property-center {
    flex: 1;
    text-align: center;

}

















.game-link {
    padding: 10px 20px;
    font-weight: bold;
    font-size: 1.0em;
    display: inline-block;
    margin: 10px;
    color: #7be;
    text-shadow: 0 0 8px rgba(0, 123, 255, 0.7), 0 0 12px rgba(0, 123, 255, 0.5);
}

.game-link:hover {
    text-decoration: none;
    color: #adf;
    text-shadow: 0 0 8px rgba(128, 192, 255, 0.7), 0 0 12px rgba(128, 192, 255, 0.5);
}

/* Modal styles */
.modal {
    display: none; /* Versteckt das Modal standardmäßig */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); /* Hintergrund dunkel machen */
}

.modal-content {
    background-color: rgba(0,0,0,0.8);
    text-align: center;
    margin: 15% auto;
    padding: 20px;
    color: #ffb;
    border: 2px solid #ffb;
    box-shadow: 0 0 31px rgba(255,255,160, 0.9);
    width: 80%;
    max-width: 600px;
    border-radius: 5%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#gameDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    /* place-items: center; */ /* Zentriert das iframe */
    width: 100vw; /* Volle Breite */
    height: 100vh; /* Volle Höhe */
    background-color: black;
    /* border: 1px solid red; */
    border: 0;
}

#gameFrame {
    width: calc(100vh * 9 / 16); /* Höhe bestimmt die Breite */
    height: calc(100vw * 16 / 9); /* Breite bestimmt die Höhe */
    max-width: 100%; /* Begrenzung durch den Container */
    max-height: 100%; /* Begrenzung durch den Container */
    margin: auto;
    /* border: 1px solid green; */
    border: 0;
}