/* Estilo arreglado: estilo.css */

/* -----------------------------------
   Reset y base de layout
   ----------------------------------- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif, Verdana, Arial, Helvetica;
  font-size: 12px;
  background: #DDDDDD;
  color: #000000;
}

/* -----------------------------------
   Imágenes
   ----------------------------------- */
img {
  border: 0;
  vertical-align: middle;
}

/* -----------------------------------
   Menú principal (ID #menu)
   ----------------------------------- */
#menu {
  text-align: center;
  margin: 10px;
  padding: 5px;
  border: 1px solid #000000;
}

/* -----------------------------------
   Tablas de aviso y formularios
   ----------------------------------- */
table.add,
table.ad {
  text-align: center;
  margin: auto;
  color: red;
}

table#login,
table#clanes,
table#mensajet {
  padding: 15px;
  margin: auto;
  border: 1px solid #000000;
}

/* -----------------------------------
   Contenido y mensajes
   ----------------------------------- */
span.linkreg {
  font-size: 15px;
  text-decoration: underline;
  font-weight: bold;
}

div#contenido {
  text-align: justify;
  margin: 20px;
  padding: 5px;
  flex: 1;
}

div#error {
  text-align: center;
  color: red;
}

div#mensaje {
  text-align: center;
  color: blue;
}

/* -----------------------------------
   Derechos y pie de página
   ----------------------------------- */
div#rights {
  text-align: center;
  margin: 10px;
  padding: 5px;
  border: 1px solid #000000;
}

/* -----------------------------------
   Noticias y subastas
   ----------------------------------- */
div.news {
  font-weight: bold;
  text-decoration: underline;
}

table.texto,
table.subastas {
  margin: 0 40px 30px;
  padding: 5px;
}

table.subastas {
  text-align: center;
}

/* -----------------------------------
   Highscores
   ----------------------------------- */
table.highscores {
  margin: auto;
  text-align: center;
}

table.highscores td {
  padding: 5px;
  width: 100px;
}

table.highscores td.jugador {
  text-decoration: underline;
}

/* -----------------------------------
   Enlaces
   ----------------------------------- */
a:link,
a:visited,
a:active {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

a[href*="perfil.php?jugador"]:hover {
  text-decoration: underline;
}

/* -----------------------------------
   Highlight y tooltips
   ----------------------------------- */
.highlight {
  background-color: #F5F58C;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* -----------------------------------
   Botones de encantamiento
   ----------------------------------- */
.btn_Enchant,
.btn_Disenchant {
  border: 1px solid white;
  border-radius: 3px;
  outline: 1px solid black;
  color: white;
  padding: 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
}

.btn_Enchant {
  background-color: #241530;
}
.btn_Enchant:enabled {
  background-image: url("https://lifogame.es/img.lifo/img/enchant/enchanted.gif");
}
.btn_Enchant:disabled {
  background-color: #8a8a8a;
}

.btn_Disenchant {
  background-color: #6d0c4d;
}
.btn_Disenchant:enabled {
  background-image: url("https://lifogame.es/img.lifo/img/enchant/enchanted.gif");
}
.btn_Disenchant:disabled {
  background-color: #8a8a8a;
}

/* -----------------------------------
   Animaciones de encantamiento
   ----------------------------------- */
.enchant_Container {
  margin: auto;
  position: relative;
  height: 270px;
  width: 647px;
}
.enchant_Base, .enchant_Runes {
  position: absolute;
  top: 0;
  left: 377px;
}
.enchant_move_base {
  animation: move_base 300ms infinite;
}
@keyframes move_base {
  0%   { top: -10px; left: 367px; }
  25%  { top:  10px; left: 387px; }
  50%  { top: -10px; left: 377px; }
  75%  { top:  10px; left: 367px; }
  100% { top:  10px; left: 387px; }
}
.enchant_move_item {
  position: absolute;
  left: 496px;
  animation: move_item 300ms infinite;
}
@keyframes move_item {
  0%, 50%  { top: 109px; left: 496px; }
  25%, 75% { top: 129px; left: 506px; }
}
.enchant_Book  { position: absolute; top:  94px; left:   0px; }
.enchant_Effect{ position: absolute; top:  61px; left:  89px; z-index:1; }
.enchant_Spell { position: absolute; top: 114px; left:  38px; z-index:2; }
.enchant_Item  { position: absolute; top: 119px; left: 496px; z-index:2; }
.animated_Effect { animation: lightning 3s infinite; }
@keyframes lightning {
  0%,21%,35%,51%,100% { opacity:1; }
  5%,20%,25%,40%,45%,55% { opacity:0; }
}
.enchant_ClearScreen {
  position: absolute;
  top: 0; left: 0;
  width:100vw; height:100vh;
  z-index:100;
}
.enchant_ClearScreen_Anim {
  background-color: #fff;
  animation: shine 5.44s infinite;
  opacity: 0.6;
}
@keyframes shine {
  0%,15%,21%,35%,41%,51%,100% { opacity:0.6; }
  5%,20%,25%,40%,45%,55% { opacity:0; }
}
.txt_encantado {
  color: darkmagenta;
  text-shadow: 0 1px #000;
}

/* -----------------------------------
   Tabla de bonificación
   ----------------------------------- */
.bonificacion td {
  padding: 8px 4px 1px 9px;
  text-align: left;
  vertical-align: top;
}
.bonificacion td td {
  padding: 0;
}
.bonificacion td th,
.bonificacion td td {
  background: none;
}
.bonificacion table {
  border-collapse: collapse;
}
.bonificacion th {
  padding: 3px;
  vertical-align: top;
}
.bonificacion td,
.bonificacion th {
  background: url(https://lifogame.es/img.lifo/img/interface/tooltip.png);
  font-family: Verdana, "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 17px;
  color: #fff;
}

/*** juego interactivo en inglés ***/

/* Contenedor de la escena: único recuadro */
.scene {
  background: #fdf6e3;              /* tono papel antiguo */
  padding: 1.25em;
  font-family: "Courier New", monospace;
  border: 2px solid #dcd0b1;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  line-height: 1.5;
  margin-bottom: 1.5em;
  position: relative;
}

/* Ahora .scene-text es simplemente texto dentro de .scene (sin recuadro propio) */
.scene-text {
  margin: 0;                        /* sin márgenes extra */
  padding: 0;                       /* sin relleno */
  font-size: 1rem;
  color: #333;                      /* color legible sobre el fondo de .scene */
}

/* Eliminamos cualquier fondo o borde de traducciones/opciones traducidas */
.scene-trans, .opt-trans {
  display: none; /* oculto por defecto */
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.95rem;
  color: #555;
}

/* Lista de opciones */
.options {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5em;
  text-align: center;    /* centra los <li> en horizontal */
}

.options li {
  margin: 0.5em;         /* separa cada botón de sus vecinos */
}

.options a {
   text-decoration: none;
  color: #026aa7;
  font-family: "Courier New", monospace;
  background: #eaf4fc;
  padding: 0.5em 0.75em;
  border: 1px solid #b3d4fc;
  border-radius: 6px;
  display: inline-block; /* se mantiene inline-block dentro del <li> */
  transition: background 0.2s ease, transform 0.1s ease;
}

.options a:hover {
  background: #d0e8fb;
  transform: translateY(-1px);
}

/* Botones de traducción (si los usas en algún lugar) */
.btn-toggle {
  background: #fceecf;
  border: 1px solid #e6d5a8;
  border-radius: 4px;
  color: #8a6d3b;
  font-size: 0.85em;
  padding: 0.3em 0.6em;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-left: 0.5em;
}

.btn-toggle:hover {
  background: #f7e5b8;
}

.btn-toggle.small {
  font-size: 0.75em;
  padding: 0.2em 0.4em;
}

/* Controles generales */
.controls {
  font-family: "Courier New", monospace;
  margin-top: 1em;
}

/* Enlaces de controles (por defecto) */
.controls a {
  color: #b45f06;
  text-decoration: none;
  margin-right: 1em;
  transition: color 0.2s ease;
}

.controls a:hover {
  color: #7a3f02;
}

/* Botón de “Reiniciar esta historia” con Joya premium */
.reset-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;              /* evitar salto de línea */
  border-radius: 10px;
  color: #a84300;
  font-family: "Courier New", monospace;
  font-size: 1em;
  padding: 0.5em 0.75em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  margin-right: 1em;
}

/* Imagen dentro del botón de reinicio */
.reset-btn img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  margin-left: 0.5em;
  vertical-align: middle;
}

/* Hover sencillo: solo cambio de fondo y color */
.reset-btn:hover {
  color: #922b00;        /* texto más oscuro */
}


/* Barra de progreso */
.progress {
  font-family: "Courier New", monospace;
  background: #e1f5fe;
  padding: 0.5em 1em;
  border-radius: 6px;
  border: 1px solid #81d4fa;
  margin-bottom: 1em;
  text-align: center;
  font-size: 0.95em;
  color: #0277bd;
}


/* Caja de recompensa compacta y moderna */
.reward-box {
  background: #f0fff0;                /* verde muy suave */
  border: 1px solid #28a745;          /* verde más vivo para el borde */
  border-radius: 12px;                /* esquinas muy redondeadas */
  padding: 6px 10px;                  /* menos padding para que sea más pequeña */
  margin: 8px 0;
  color: #19692c;                     /* texto verde oscuro */
  font-weight: 500;
  font-size: 0.9rem;                  /* fuente ligeramente más pequeña */
  display: inline-flex;               /* en vez de flex, inline-flex para que no ocupe ancho completo */
  align-items: center;
  gap: 8px;                           /* espacio pequeño entre icono y texto */
  line-height: 1.2;                   /* que el texto no quede muy alto */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Hover sutil */
.reward-box:hover {
  background: #e7ffe7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Variante “info” (recompensa ya obtenida) */
.reward-box.info {
  background: #fafafa;
  border-color: #bbb;
  color: #555;
}

.reward-box {
  display: table;
  margin: 1rem auto;            /* centra el contenedor en la página */
  padding: 0.75rem;
  background: #e6ffe6;
  border: 1px solid #b3ffb3;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.reward-box:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Variantes “info” y “error” igualmente con display: table */
.reward-box.info {
  display: table;
  margin: 1rem auto;
  padding: 0.75rem;
  background: #fafafa;
  border: 1px solid #bbb;
  border-radius: 4px;
  color: #555;
}

.reward-box.error {
  display: table;
  margin: 1rem auto;
  padding: 0.75rem;
  background: #ffe6e6;
  border: 1px solid #ffb3b3;
  border-radius: 4px;
  color: #a00;
}

.reward-img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

/* Línea separadora (hr) antes de los controles */
.separator {
  border: none;
  border-top: 1px solid #000000; /* mismo color suave que los bordes de .scene */
  margin: 1.5em 0;               /* separa arriba y abajo */
  width: 100%;
  opacity: 0.2;
}

/* ============================
   Opción deshabilitada
   ============================ */
.options a.disabled-option {
  background: #f0f0f0;        /* fondo gris claro */
  color: #888888;             /* texto gris oscuro */
  border: 1px solid #cccccc;  /* borde gris */
  cursor: not-allowed;        /* cursor “prohibido” */
  pointer-events: none;       /* desactiva cualquier evento de ratón */
  opacity: 0.6;               /* semi-transparente */
  text-decoration: none;      /* quitar subrayado si lo hubiera */
}

/* Opcional: eliminar la animación hover */
.options a.disabled-option:hover {
  background: #f0f0f0;    /* mismo fondo que en reposo */
  transform: none;        /* sin “translateY” */
}

/* Etiqueta “Necesitas” (solo debe estar en inventario, no se consume) */
.req-info {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  gap: 0.25rem;
  font-size: 0.9em;
  color: #555; /* gris oscuro */
}

/* Etiqueta “Se consume” (se elimina del inventario) en rojo */
.consume-info {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  gap: 0.25rem;
  font-size: 0.9em;
  color: #c00; /* rojo */
}

/* Si quieres enfatizar aún más, puedes añadir que “Se consumirá” esté en negrita */
.consume-info span {
  font-weight: bold;
}



/* -----------------------------------
   Responsive
   ----------------------------------- */
@media (min-width: 300px) {
  img.logo {
    display: block;
		margin-left: auto;
		margin-right: auto;
		width: 400px;
		height: 60px;
  }
}

    @media screen and (max-width: 1200px) {
      /* Aumentar tamaño de fuente */
      #menu {
        font-size: 14px !important;
      }
      /* Espaciar enlaces dentro del menú */
      #menu a {
        display: inline-block !important;
      }
      .scene {
    padding: 1em;
  }
  .scene-text {
    font-size: 1rem;
  }
  .options a {
    font-size: 1.6em;
    padding: 0.6em 0.9em;
  }
  .reset-btn {
    font-size: 1.5em;
    padding: 0.7em 0.9em;
  }
    
}