@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

*{
  font-family: 'Poppins', sans-serif;
  margin:0; padding:0;
  box-sizing: border-box;
  outline: none; border:none;
  text-decoration: none;
  text-transform: capitalize;
  transition: .2s linear;
}

html, body {
  height: 100%;             /* Assegura que ocupin tota la pantalla */
  margin: 0;
  background: linear-gradient(45deg, blueviolet, lightgreen);
}


.container {
  padding: 15px 9%;
  padding-bottom: 100px;
}


.container .heading{
  text-align: center;
  padding-bottom: 15px;
  color:#fff;
  text-shadow: 0 5px 10px rgba(0,0,0,.2);
  font-size: 50px;
}

.container .box-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap:15px;
}

.container .box-container .box{
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  border-radius: 5px;
  background: #e6f2ff; 
  text-align: center;
  padding:30px 20px;
}

.container .box-container .box2{
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  border-radius: 5px;
  background:linear-gradient(45deg, blueviolet, lightgreen);
  text-align: center;
  padding:30px 20px;
}

.container .box-container .box2 img{ height: 80px; }

.container .box-container .box2 h3{
  color:#444;
  font-size: 22px;
  padding:10px 0;
}

.container .box-container .box2 p{
  color:#777;
  font-size: 15px;
  line-height: 1.8;
}

.container .box-container .box2 .btn{
  margin-top: 10px;
  display: inline-block;
  background:#333;
  color:#fff;
  font-size: 17px;
  border-radius: 5px;
  padding: 8px 25px;
}

.container .box-container .box2 .btn:hover{ letter-spacing: 1px; }

.container .box-container .box2:hover{
  box-shadow: 0 10px 15px rgba(0,0,0,.3);
  transform: scale(1.03);
}

.container .box-container .box img{ height: 80px; }

.container .box-container .box h3{
  color:#444;
  font-size: 22px;
  padding:10px 0;
}

.container .box-container .box p{
  color:#777;
  font-size: 15px;
  line-height: 1.8;
}

.container .box-container .box .btn{
  margin-top: 10px;
  display: inline-block;
  background:#333;
  color:#fff;
  font-size: 17px;
  border-radius: 5px;
  padding: 8px 25px;
}

.container .box-container .box .btn:hover{ letter-spacing: 1px; }

.container .box-container .box:hover{
  box-shadow: 0 10px 15px rgba(0,0,0,.3);
  transform: scale(1.03);
}

@media (max-width:768px){
  .container{ padding:20px; }
}

/* ===================== BOTONS CIRCULARS TRANSPARENTS ===================== */

/* Fila dels 3 botons */
.btn-row{
  display: grid;
  grid-template-columns: repeat(3, 84px);
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
}

/* Override del .btn base: rodó, SENSE fons ni ombra */
.container .box-container .box .btn.icon-btn{
  width: 84px;
  height: 84px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;     /* 👈 transparent de veritat */
  box-shadow: none !important;
  border: none !important;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  letter-spacing: 0 !important;           /* anul·la hover del .btn base */
  transition: transform .15s ease, filter .15s ease;
}

/* Hover només amb escala lleu (sense fons) */

.container .box-container .box .btn.icon-btn:hover{
  transform: translateY(-2px) scale(1.03);
  filter: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.07) inset;
}

/* La icona: nítida, no deformada. Pots pujar o baixar tamany aquí */
.container .box-container .box .btn.icon-btn .btn-ico{
  width: 58px;
  height: 58px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  display: block;
}

/* Els tipus NO posen cap fons; es mantenen transparents */
.container .box-container .box .btn-game{  background: transparent !important; }
.container .box-container .box .btn-play{  background: transparent !important; }
.container .box-container .box .btn-video{ background: transparent !important; }

/* Accessibilitat: text ocult però llegible per screen readers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Mòbil */
@media (max-width: 480px){
  .btn-row{ grid-template-columns: repeat(3, 72px); gap: 10px; }
  .container .box-container .box .btn.icon-btn{ width:72px; height:72px; }
  .container .box-container .box .btn.icon-btn .btn-ico{ width:46px; height:46px; }
}