/* Regole base per il body e html */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;  /* evita scroll orizzontale */
  overflow-y: auto;    /* abilita lo scroll verticale */
}

#body-privacy { 
    padding: 2em; 
    line-height: 1.6; 
    text-align: center; 
    max-width: 800px;
    margin: 0 auto;
}
#body-privacy p, #body-privacy ul, #body-privacy ol {
    text-align: left;
}

#body-privacy h1, #body-privacy h2, #body-privacy h3 {
    text-align: center;
}
    .lang { display: none; }
	
    .lang.active { display: block; }
	
	.top-bar { display: flex; justify-content: center; margin-bottom: 2em; }
	
    #button-privacy { margin-bottom: 1em; padding: 0.5em 1em; cursor: pointer; }

@font-face {
	font-family: Poiret;
	src: url(fonts/PoiretOne-Regular.ttf);
}
@font-face {
	font-family: Vergilia;
	src: url(fonts/Vergilia-Regular.woff);
}


*{
	font-family: Poiret;
	font-weight: bold;
}

.wave {
	display: inline-block;
	animation: wave 2s infinite;
}

.container {
  max-width: 900px;   /* larghezza massima leggibile */
  margin: 0 auto;     /* centra il contenuto */
  padding: 15px;
  border-radius: 12px;         /* opzionale */
}

@keyframes wave {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

.wave:nth-child(2) { animation-delay: 0.1s; }
.wave:nth-child(3) { animation-delay: 0.2s; }
.wave:nth-child(4) { animation-delay: 0.3s; }
.wave:nth-child(5) { animation-delay: 0.4s; }
.wave:nth-child(6) { animation-delay: 0.5s; }
.wave:nth-child(7) { animation-delay: 0.6s; }
.wave:nth-child(8) { animation-delay: 0.7s; }
.wave:nth-child(9) { animation-delay: 0.8s; }
.wave:nth-child(10) { animation-delay: 0.9s; }

/* Background e layout generale */
.body-home {
  background: url('images/ktp-background.webp') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;   /* Permette lo scroll se serve */
  display: block;      /* Rimosso il flex che bloccava lo scroll */
  padding: 2em;
  margin: 0;
  color: #fff;
  text-shadow: 2px 2px 8px #000;
}

.text-center {
  text-align: center;
}

.glowing {
  animation: glow 2s infinite alternate;
}

h1 {
  font-size: 4em;
  margin: 0;
  display: inline-block;
}
@keyframes glow {
  0% { text-shadow: 0 0 5px #008000, 0 0 10px #008000, 0 0 15px #008000, 0 0 20px #008000; }
  100% { text-shadow: 0 0 10px #008000, 0 0 20px #008000, 0 0 30px #008000, 0 0 40px #008000; }
}

/* Icone social */
.social-icons {
  margin-top: 20px;
}

.social-icons a {
  display: inline-block;
  color: white;
  padding: 15px;
  margin: 10px;
  font-size: 2em;
  transition: transform 0.3s, color 0.3s;
}

.social-icons a.instagram {
  color: #E1306C; /* Instagram pink */
}

.social-icons a.twitter {
  color: #1DA1F2; /* Twitter blue */
}

.social-icons a.bluesky {
  color: #36A8D8; /* Bluesky blue */
}

.social-icons a:hover {
  transform: scale(1.1); /* Effetto zoom */
  color: #fff;
}


.sprite-animation {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-20%);
  width: 128px;
  height: 128px;
  background: url('images/four-legs-walk.png') no-repeat;
  background-size: 2048px 128px;
  animation: play 1s steps(16, jump-none) infinite,
             move 5s linear infinite,
             fade 5s linear infinite;
  pointer-events: none;
}

@keyframes play {
  from { background-position: 0; }
  to { background-position: 100%; }
}

@keyframes move {
  0% { left: 0; }
  100% { left: calc(100% - 128px); }
}

@keyframes fade {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}

/* Contenitore testo */
.text-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

.coming-soon {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.container {
  max-width: 100%;
  padding: 15px;
}
.privacy-row {
  position: relative; /* fa da contenitore per le lingue sovrapposte */
}

.privacy-column {
  position: absolute;   /* sovrappone le colonne una sull'altra */
  top: 0;
  left: 0;
  width: 100%;
}


@media (min-width: 768px) {
  .column {
    flex: 1; /* Desktop: colonne affiancate */
  }
}

/* ADD THIS: Grid container styles */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 20px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.game-card {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 280px;  /* limits card width even on big screens */
  box-sizing: border-box;
  margin: 0 auto; /* Center the card within its grid cell */
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
}

.game-card h2 {
  font-size: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 15px;
  color: #fff;
  text-shadow: 2px 2px 6px #000;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
}

.game-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.game-card img:hover {
  transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 15px;
  }
}

a {
	color: white !important;
	background-color: white;
}

@media (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr; /* stack in one column */
    gap: 15px;
    padding: 0 10px;
  }
}

#jttb {
   font-family: 'Vergilia', sans-serif;
   font-size: 24px;
}
#suolv {
   font-family: Poiret;
   font-size: 24px;
   font-weight: bold;
}