/* Fuente personalizada tipo Deltarune */
@font-face {
  font-family: 'DeterminationMono';
  src: url('determination.ttf') format('truetype');
}

/* Estilo general del sitio */
body {
  background-color: #000;
  color: #fff;
  font-family: 'DeterminationMono', monospace;
  text-align: center;
  padding: 50px;
}

/* Contenedor principal */
.container {
  max-width: 600px;
  margin: auto;
}

/* Título principal */
h1 {
  font-size: 20px;
  margin-bottom: 20px;
}

/* Botones estilo retro blanco y negro */
.btn {
  display: block;
  margin: 10px auto;
  padding: 10px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  font-size: 14px;
  font-family: 'DeterminationMono', monospace;
  transition: none;
  cursor: pointer;
}

.btn:hover {
  background-color: #000;
  color: #fff;
}

/* Botón activo con texto dorado */
.btn.active {
  color: #ffd700;
}

/* Pie de página */
.footer {
  margin-top: 40px;
  font-size: 10px;
  color: #666;
  text-align: center;
}

/* Menú de opciones de música */
.options-menu {
  margin-top: 40px;
  padding: 20px;
  border: 2px solid #fff;
  background-color: #000;
  font-family: 'DeterminationMono', monospace;
  font-size: 12px;
  color: #fff;
}

/* Botones del menú de opciones */
.options-menu button {
  margin: 10px;
  padding: 10px;
  background-color: #000;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  transition: none;
}

.options-menu button:hover {
  background-color: #000;
  color: #fff;
}

/* Control de volumen */
.volume-slider {
  width: 200px;
  margin-top: 10px;
  appearance: none;
  height: 10px;
  background: #fff;
  border: none;
}

/* Menú con corazón navegable */
.menu {
  position: relative;
  display: inline-block;
  text-align: left;
}

/* Corazón ♥ animado */
@keyframes heartBeat {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

#cursor {
  position: absolute;
  left: -25px;
  font-size: 16px;
  color: red;
  top: 0;
  transition: top 0.2s ease-out;
}

/* Pulso decorativo */
@keyframes pulse {
  0%   { transform: scale(1); }
  10%  { transform: scale(1.7); }
  20%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.heartbeat {
  display: inline-block;
  font-size: 32px;
  color: white;
  animation: pulse 10s infinite;
}

/* Texto con fuente pixelada */
#type-title, #type-body {
  font-family: 'DeterminationMono', monospace;
  white-space: pre;
}

/* Botones de idioma en fila horizontal */
.language-selector {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.language-selector .btn {
  font-family: 'DeterminationMono', monospace;
  width: auto;
  padding: 10px 16px;
}

.susie-sleep {
  margin: 20px auto;
  text-align: center;
}

.susie-sleep img {
  width: 64px; /* ajusta según el tamaño del sprite */
  image-rendering: pixelated;
}