<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../css/style.css">
  <script src="../js/update.js" defer></script>
  <script src="../js/script.js" defer></script>
</head>
<body>
  <main>
    <h1>Conversation and Event Operations</h1>
    <hr class="hr1">
    <div id="Adv" class="section-title">How to View the ADV Screen</div>
    <img src="../img/ScreenAdv.png" alt="ADV Screen" class="content-image-screen">
    <div class="system-block">
      <table class="system-table">
        <h3>Keyboard Operations</h3>
        <tr><th>Enter Key / Left Click</th> <td>Advance Text</td></tr>
        <tr><th>Space Key</th>             <td>Skip</td></tr>
        <tr><th>Right Click</th>          <td>Show/Hide Window</td></tr>
        <tr><th>Escape Key</th>           <td>Open Configuration</td></tr>
        <tr><th>Backspace Key</th>        <td>Emergency Screen Change</td></tr>
      </table>
    </div>

    <div id="AdvSelect" class="section-title">How to View Choices in the ADV Screen</div>
    <img src="../img/ScreenAdvSelect.png" alt="ADV Screen Choices" class="content-image-screen">
    <p>
      During the progression of the story on the ADV screen, choices may appear.<br>
      Choices are displayed as buttons, and the game's progression will temporarily pause until one is selected.
    </p>

    <div id="UserGuide" class="section-title">Other Operations</div>
    <img src="../img/ScreenUserGuidebar.png" alt="User Guide Bar" class="content-image-screen">
    <p>
      When operations are available, a 'User Guide Bar' will be displayed at the bottom of the screen, showing the available actions for the current screen.<br>
      If you're unsure about the operations, refer to this guide.
    </p>
  </main>
</body>
</html>