@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

body {
  margin:0;
  font-family:'Varela Round', sans-serif;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* overflow:hidden; */
  /* subtelniejszy gradient */
  background: linear-gradient(180deg, #dbefff 0%, #f4faff 100%);
  background-size: 400% 400%;
  animation: gradientShift 25s ease-in-out infinite;
  position:relative;
}

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

/* Linie jak w Wii */
body::after {
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:repeating-linear-gradient(
    0deg,
    rgba(200,200,200,0.1),
    rgba(200,200,200,0.1) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events:none;
}

/* Ekran ładowania */
#loading-screen{text-align:center;color:#004b8d;animation:fadeIn 1.5s ease;}
.loader{width:180px;height:12px;background:#cfe6ff;border-radius:10px;margin:20px auto;overflow:hidden;position:relative;}
.loader::before{content:"";position:absolute;width:40%;height:100%;background:#4da3ff;border-radius:10px;animation:loadAnim 2.5s infinite;}
@keyframes loadAnim{0%{left:-40%}50%{left:100%}100%{left:-40%}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

/* Menu */
#main-menu{display:none;flex-direction:column;align-items:center;gap:30px;}
h1{color:#0052a3;font-size:2.2rem;text-shadow:0 1px 2px #fff;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); /* większe kafelki na PC */
  gap:25px;
  max-width:750px;
  width:90%;
}


.tile{
  background:#ffffffdd;border-radius:25px;box-shadow:0 6px 18px rgba(0,0,0,0.15);
  padding:20px;text-align:center;cursor:pointer;transform:scale(0);opacity:0;
  animation: tileAppear 0.5s forwards;transition:transform 0.2s,box-shadow 0.2s;
  position:relative;
}
.tile:hover{transform:scale(1.08);box-shadow:0 10px 25px rgba(0,0,0,0.2);}
.tile:nth-child(1){animation-delay:0.3s;}
.tile:nth-child(2){animation-delay:0.5s;}
.tile:nth-child(3){animation-delay:0.7s;}
.tile:nth-child(4){animation-delay:0.9s;}
.tile:nth-child(5){animation-delay:1.1s;}
.tile:nth-child(6){animation-delay:1.3s;}
@keyframes tileAppear{to{transform:scale(1);opacity:1;}}

footer{margin-top:50px;font-size:0.85rem;color:#6a8bb5;text-align:center;}

/* Panele */
.panel{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.8);
  width:80%; max-width:600px;
  background:#ffffffee; border-radius:25px;
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
  padding:30px;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition: all 0.5s ease;
}
.panel.active{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  pointer-events:auto;
}
.back-btn{
  position:absolute; top:15px; left:15px; background:#4da3ff;color:white;border:none;padding:5px 10px;border-radius:10px;
  cursor:pointer; font-weight:bold;
}
.back-btn:hover{background:#1f87ff;}

/* Extras button */
#surprise-btn{
  margin-top:20px;
  padding:10px 20px;
  background:#ffb347;
  border:none;
  border-radius:15px;
  cursor:pointer;
  font-weight:bold;
  color:white;
}
#surprise-btn:hover{background:#ffa500;}

/* Achievement popup */
#achievement-popup{
  position:fixed;
  top:20px; right:20px;
  background:#ffdf80;
  padding:10px 20px;
  border-radius:15px;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  opacity:0;
  transform:translateY(-20px);
  transition:all 0.5s ease;
  font-weight:bold;
  color:#444;
  pointer-events:none;
}
#achievement-popup.show{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:480px){
  .panel{
    width:90%;
    max-height:90vh; /* maksymalna wysokość ekranu */
    padding:20px;
    border-radius:15px;
    font-size:0.9rem;
    overflow-y:auto; /* scroll jeśli treść większa niż panel */
  }
}