/* ==========================================
   bases y cosas principales
   ========================================== */

body {
  background-color: #1a1a21;
  color: white;
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;

  /* Corregido a la raíz de Neocities */
  background-image: url("images/bgstars.png");
  background-repeat: repeat;
}

.contenedor {
  width: 85%;
  max-width: 900px;
  margin: 30px auto;
  
  background-color: #322a49;
  padding: 25px;
  border: 4px double #5a4b7f;
  border-radius: 0px;
  box-shadow: 6px 6px 0px #000000;
}

.contenedor .titulado {
  width: 90%;
  max-width: 700px;
  margin: 15px auto;
  
  background-color: #3b3d87;
  padding: 15px;
  border: 2px dashed #6d70d3;
  border-radius: 0px;
  box-shadow: 4px 4px 0px #1a1a21;
  text-align: center;
}

.contenedor .titulado h1 {
  width: 90%;
  max-width: 700px;
  margin: 10px auto;
  
  background-color: #322a49;
  padding: 12px;
  border: 2px solid #222034;
  border-radius: 0px;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6);
  font-weight: bold;
}

.contenedor .titulado h1::before,
.contenedor .titulado h1::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("images/zorrete1.gif");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.contenedor .titulado h1::before {
  margin-right: 15px;
}

.contenedor .titulado h1::after {
  margin-left: 15px;
}

.center {
  text-align: center;  
}

.contenedor hr{
  /* 1. Forzamos al navegador a borrar la línea gris por defecto */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none !important;
  height: 0 !important;
  
  /* 2. Le ponemos TU línea punteada morada */
  border-top: 3px dashed #5a4b7f !important;
  
  /* 3. Márgenes y sombras para que encaje con tu web */
  margin: 30px auto;
  width: 90%;
  display: block;
}


/* ==========================================
   pagina de error
   ========================================== */

.ham1 {
  font-weight: bold;
  text-align: center;
}

.ham1::before,
.ham1::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 60px;
  background-image: url("images/hamham1.gif");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.ham1::before {
  margin-right: 15px;
}

.ham1::after {
  margin-left: 15px;
}


.ham2::before,
.ham2::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 60px;
  background-image: url("images/hamham2.gif");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.ham2::before {
  margin-right: 15px;
}

.ham2::after{
margin-left: 15px;
}


/* ==========================================
   dialogos de personajes
   ========================================== */

.nereD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 18px;
  color: #e7d7fe;
  text-shadow:
    -2px 0 #222034,
     2px 0 #222034,
     0 -2px #222034,
     0  2px #222034;
  text-align: center;
  background-color: #9684c4;
  border: 4px double #222034;
  border-radius: 0px;
  box-shadow: 6px 6px 0px #000000;
}

.nereD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/nere.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.miaD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 18px;
  color: #ffe0cd;
  text-shadow:
    -2px 0 #222034,
     2px 0 #222034,
     0 -2px #222034,
     0  2px #222034;
  text-align: center;
  background-color: #815452;
  border: 4px double #222034;
  border-radius: 0px;
  box-shadow: 6px 6px 0px #000000;
}

.miaD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/mia.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.roseD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 18px;
  color: #a46654;
  text-shadow:
    -2px 0 #222034,
     2px 0 #222034,
     0 -2px #222034,
     0  2px #222034;
  text-align: center;
  background-color: #764447;
  border: 4px double #222034;
  border-radius: 0px;
  box-shadow: 6px 6px 0px #000000;
}

.roseD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/rose.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.aliceD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 18px;
  color: #dae8f9;
  text-shadow:
    -2px 0 #222034,
     2px 0 #222034,
     0 -2px #222034,
     0  2px #222034;
  text-align: center;
  background-color: #a2afe4;
  border: 4px double #222034;
  border-radius: 0px;
  box-shadow: 6px 6px 0px #000000;
}

.aliceD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/alice.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.dartD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 18px;
  color: #ffb6a6;
  text-shadow:
    -2px 0 #222034,
     2px 0 #222034,
     0 -2px #222034,
     0  2px #222034;
  text-align: center;
  background-color: #d86c5d;
  border: 4px double #222034;
  border-radius: 0px;
  box-shadow: 6px 6px 0px #000000;
}

.dartD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/dart.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.dsusD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 18px;
  color: #ff6565;
  text-shadow:
    -2px 0 #222034,
     2px 0 #222034,
     0 -2px #222034,
     0  2px #222034;
  text-align: center;
  background-color: #d53665;
  border: 4px double #222034;
  border-radius: 0px;
  box-shadow: 6px 6px 0px #000000;
}

.dsusD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/dan sus.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.thornD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 18px;
  color: #a76e6a;
  text-shadow:
    -2px 0 #222034,
     2px 0 #222034,
     0 -2px #222034,
     0  2px #222034;
  text-align: center;
  background-color: #764549;
  border: 4px double #222034;
  border-radius: 0px;
  box-shadow: 6px 6px 0px #000000;
}

.thornD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/thorn.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.danD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 18px;
  color: #f7d0af;
  text-shadow:
    -2px 0 #222034,
     2px 0 #222034,
     0 -2px #222034,
     0  2px #222034;
  text-align: center;
  background-color: #3f8f78;
  border: 4px double #222034;
  border-radius: 0px;
  box-shadow: 6px 6px 0px #000000;
}

.danD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/dan.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}


/* ==========================================
   botones
   ========================================== */

.boton {
  display: inline-block;
  background-color: #b7b4cc;
  color: black;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #3e3c4f;
  border-bottom: 2px solid #3e3c4f;
  padding: 4px 12px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
}

.boton:hover {
  background-color: #6c6a7c;
  color: white;
  cursor: pointer;
}

.boton:active {
  border-top: 2px solid #3e3c4f;
  border-left: 2px solid #3e3c4f;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

/*botones de personajes*/

/* --- NERE --- */
.boton.nere {
  background-color: #9684c4;
  border-top: 2px solid #d8dffd;
  border-left: 2px solid #d8dffd;
  border-right: 2px solid #70508a;
  border-bottom: 2px solid #70508a;
}
.boton.nere::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/nere.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
}
.boton.nere:hover {
  background-color: #d8dffd;
  color: black;
  cursor: pointer;
}
.boton.nere:active {
  border-top: 2px solid #70508a;
  border-left: 2px solid #70508a;
  border-right: 2px solid #d8dffd;
  border-bottom: 2px solid #d8dffd;
}


/* --- MIA --- */
.boton.mia {
  background-color: #815452;
  border-top: 2px solid #a77e74;
  border-left: 2px solid #a77e74;
  border-right: 2px solid #553240;
  border-bottom: 2px solid #553240;
}
.boton.mia::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/mia.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
}
.boton.mia:hover {
  background-color: #a77e74;
  cursor: pointer;
}
.boton.mia:active {
  border-top: 2px solid #553240;
  border-left: 2px solid #553240;
  border-right: 2px solid #a77e74;
  border-bottom: 2px solid #a77e74;
}


/* --- ROSE --- */
.boton.rose {
  background-color: #a46654;
  border-top: 2px solid #d18f7d;
  border-left: 2px solid #d18f7d;
  border-right: 2px solid #5f372c;
  border-bottom: 2px solid #5f372c;
}
.boton.rose::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/rose.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
}
.boton.rose:hover {
  background-color: #d18f7d;
  color: black;
  cursor: pointer;
}
.boton.rose:active {
  border-top: 2px solid #5f372c;
  border-left: 2px solid #5f372c;
  border-right: 2px solid #d18f7d;
  border-bottom: 2px solid #d18f7d;
}


/* --- ALICE --- */
.boton.alice {
  background-color: #dae8f9;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #8f97b9;
  border-bottom: 2px solid #8f97b9;
  color: black; /* Texto oscuro para legibilidad */
}
.boton.alice::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/alice.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
}
.boton.alice:hover {
  background-color: #ffffff;
  color: black;
  cursor: pointer;
}
.boton.alice:active {
  border-top: 2px solid #8f97b9;
  border-left: 2px solid #8f97b9;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}


/* --- DART --- */
.boton.dart {
  background-color: #d86c5d;
  border-top: 2px solid #ffbc8f;
  border-left: 2px solid #ffbc8f;
  border-right: 2px solid #8d2e52;
  border-bottom: 2px solid #8d2e52;
}
.boton.dart::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/dart.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
}
.boton.dart:hover {
  background-color: #ffbc8f;
  color: black;
  cursor: pointer;
}
.boton.dart:active {
  border-top: 2px solid #8d2e52;
  border-left: 2px solid #8d2e52;
  border-right: 2px solid #ffbc8f;
  border-bottom: 2px solid #ffbc8f;
}


/* --- DANSUS --- */
.boton.dansus {
  background-color: #db3240;
  border-top: 2px solid #ff806f;
  border-left: 2px solid #ff806f;
  border-right: 2px solid #911746;
  border-bottom: 2px solid #911746;
}
.boton.dansus::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/dan sus.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
}
.boton.dansus:hover {
  background-color: #ff806f;
  color: black;
  cursor: pointer;
}
.boton.dansus:active {
  border-top: 2px solid #911746;
  border-left: 2px solid #911746;
  border-right: 2px solid #ff806f;
  border-bottom: 2px solid #ff806f;
}


/* --- THORN --- */
.boton.thorn {
  background-color: #734c43;
  border-top: 2px solid #a7866b;
  border-left: 2px solid #a7866b;
  border-right: 2px solid #3b1f1f;
  border-bottom: 2px solid #3b1f1f;
}
.boton.thorn::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/thorn.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
}
.boton.thorn:hover {
  background-color: #a7866b;
  cursor: pointer;
}
.boton.thorn:active {
  border-top: 2px solid #3b1f1f;
  border-left: 2px solid #3b1f1f;
  border-right: 2px solid #a7866b;
  border-bottom: 2px solid #a7866b;
}


/* --- DAN --- */
.boton.dan {
  background-color: #3f8f78;
  border-top: 2px solid #6ec989;
  border-left: 2px solid #6ec989;
  border-right: 2px solid #193546;
  border-bottom: 2px solid #193546;
}
.boton.dan::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("images/dan.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 8px;
}
.boton.dan:hover {
  background-color: #6ec989;
  color: black;
  cursor: pointer;
}
.boton.dan:active {
  border-top: 2px solid #193546;
  border-left: 2px solid #193546;
  border-right: 2px solid #6ec989;
  border-bottom: 2px solid #6ec989;
}