body {
  background-color: #000;
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.game-container {
  text-align: center;
  max-width: 1200px;
}

h1 {
  margin-bottom: 10px;
  font-size: 2em;
  color: rgb(5, 99, 241);
  text-shadow: 0 0 10px rgb(5, 99, 241), 0 0 20px rgb(5, 99, 241);
}

/* Selector */
.difficulty-container {
  margin: 15px 0;
}
.difficulty-container label {
  font-size: 1.1em;
  margin-right: 8px;
}
#difficulty {
  background-color: #111;
  color: rgb(5, 99, 241);
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px solid rgb(5, 99, 241);
  font-size: 1em;
  cursor: pointer;
  transition: 0.3s;
}
#difficulty:hover {
  background-color: rgb(5, 99, 241);
  color: #000;
}

.board {
  display: grid;
  grid-gap: 10px;
  justify-content: center;
  margin: 20px auto;
}

.board.facil {
  grid-template-columns: repeat(10, 120px); /* filas de 4 */
}

.board.dificil {
  grid-template-columns: repeat(8, 120px);
}

.card {
  width: 120px;
  height: 160px;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card.flip .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

.card-front {
  transform: rotateY(180deg);
}

.card-back {
  background-image: url('portada.png');
}

button {
  background-color: #333;
  color: white;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background-color: #555;
}

#message {
  margin-top: 10px;
  font-size: 1.2em;
  color: #0f0;
}


.img-instructivo {
  display: block;
  max-width: 600px; /* controla el ancho máximo */
  width: 100%;
  margin: 16px auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: #111;
  color: #eee;
  margin: 0;
  padding: 0;
}
  .container { max-width: 900px; margin: 0 auto; padding: 24px; }
  .title { text-align: center; margin-bottom: 8px; }
  .subtitle { text-align: center; opacity: 0.9; margin-bottom: 24px; }
  .card-doc { background:#1a1a1a; border:1px solid #333; border-radius:14px; padding:20px; line-height:1.6; }
  .btns { display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
  .btn { background:#333; color:#fff; padding:12px 18px; border-radius:10px; text-decoration:none; display:inline-block; transition:.2s; }
  .btn:hover { background:#555; }
  .list { margin-left: 1.1rem; }
  .note { font-size:.95rem; opacity:.9; margin-top:12px; }
  .img-instructivo {
    display: block;
    max-width: 600px;
    width: 100%;
    margin: 16px auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }