body {
   background-color: #f5f5f5;
}
.mdl-layout__content {
   display: flex;
   justify-content: center;
   align-items: center;
   height: calc(100vh - 64px);
}
.mdl-layout__header-row {
   justify-content: center;
   padding: 0 16px;
}

.mdl-layout__header {
   color: #fff;
}

.mdl-button:hover {
   /* background-color: rgba(158, 158, 158, .2); */
   background-color: rgba(0, 0, 0, 0.4);
   color: rgba(255, 255, 255, 0.8);
   /* outline: solid 2px rgba(0, 0, 0, 0.8); */
}

.page-content {
   text-align: center;
   width: 90%;
   max-width: 600px;
}
.pantalla {
   display: none;
   flex-direction: column;
   align-items: center;
   gap: 20px;
}
.pantalla.activa {
   display: flex;
}
#logo {
   max-width: 200px;
   width: 50%;
   margin-bottom: 20px;
}
.grid-container {
   display: grid;
   gap: 15px;
   width: 100%;
}
.grid-container.grid-4-cols {
   grid-template-columns: repeat(4, 1fr);
}
.grid-item {
   width: 100%;
   height: 90px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-transform: none;
   font-size: 14px;
   line-height: 1.2;
}
.grid-item .material-icons {
   font-size: 32px;
   margin-bottom: 5px;
}
#espacio-publicidad {
   position: fixed;
   bottom: 0;
   width: 100%;
   background-color: #e0e0e0;
   text-align: center;
   padding: 10px 0;
   font-size: 0.8em;
   color: #757575;
}
#info-juego {
   display: flex;
   justify-content: space-between;
   width: 100%;
   font-size: 1.2em;
   margin-bottom: 20px;
}
#contenedor-palabra h2 {
   font-size: 2.5em;
   margin: 40px 0;
}
#controles-juego button {
   margin: 0 10px;
}
.controles-fin-juego {
   display: flex;
   gap: 15px;
}
.repaso-container {
   display: flex;
   width: 100%;
   justify-content: space-around;
   gap: 20px;
   margin-bottom: 20px;
}
.repaso-columna {
   width: 45%;
   text-align: left;
   background-color: transparent;
   padding: 10px;
   border-radius: 4px;
   box-shadow:
      0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.2),
      0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
#columna-acertadas {
   background-color: #e8f5e9;
}
#columna-pasadas {
   background-color: #fffde7;
}
.repaso-columna ul {
   list-style-type: none;
   padding: 0;
   max-height: 200px;
   overflow-y: auto;
}
/* --- Colores de Botones --- */
.btn-red {
   background-color: #f44336;
   color: white;
}
.btn-blue {
   background-color: #2196f3;
   color: white;
}
.btn-green {
   background-color: #4caf50;
   color: white;
}
.btn-purple {
   background-color: #9c27b0;
   color: white;
}
.btn-orange {
   background-color: #ff9800;
   color: white;
}
.btn-teal {
   background-color: #009688;
   color: white;
}
.btn-brown {
   background-color: #795548;
   color: white;
}
.btn-grey {
   background-color: #607d8b;
   color: white;
}
.btn-indigo {
   background-color: #3f51b5;
   color: white;
}
.btn-pink {
   background-color: #e91e63;
   color: white;
}
.btn-cyan {
   background-color: #00bcd4;
   color: white;
}
.btn-lime {
   background-color: #cddc39;
   color: black;
}