Почему не срабатывает атрибут hidden

<div id="play_menu" hidden>
    <center>
      <h1 class="mm_title">Выберите режим:</h1>
      <div class="mm_block">
        <h1 class="mm_text">3x3</h1>
      </div>
      <div class="mm_block">
        <h1 class="mm_text">4x4</h1>
      </div>
      <div class="mm_block">
        <h1 class="mm_text">5x5</h1>
      </div>
      <div class="mm_block">
        <h1 class="mm_text">6x6</h1>
      </div>
      <h1>
      Звук&nbsp;&nbsp;<input type='radio' name='soundSwitch' style='transform:scale(2.0)' value='on'> вкл.&nbsp; 
      <input type='radio' name='soundSwitch' style='transform:scale(2.0)' value='off' checked> выкл. 
      </h1>
      <br>
    </center> 
  </div> 
  <div id="container" hidden>
    <table id="game_board_title" cellpadding="1" cellspasing="1" style="display: block;">
      <tbody>
        <tr>
          <td colspan="5">
            <p align="center">
              <button class="button_new button_title" id="button_settings" tabindex="1">
                <span>Настройки</span>
              </button>
              <button class="button_new button_title" id="button_start" tabindex="1"> 
                <span>Старт</span>
              </button>
              <br>
              <span id="time" style="--width-title-timer:145px; color:#ADFF2F">00:00:00</span>
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>  
  <div id="finished_block" style="width: 700px; height: 100px;" hidden>
    <center>
      <h1>*********************************** </h1> 
      <h1>* Поздравляю, головоломка решена! *</h1>
      <h1>*********************************** </h1> 
    </center>       
  </div>