<turbo-stream action="replace" target="main-content"><template>
  
  <script>
    if (typeof umami !== 'undefined') {
      umami.track('game_start');
    }
  </script>


<turbo-frame id="main-content">

  <turbo-frame id="current-score">
    <font size='6'>
      <b>Score: <font color='black'> 0</font></b>


    </font>
</turbo-frame>
  <div class="outer_center">
    <div class="inner_center">
      <turbo-frame id="board">
        
<div class="board" style="width:542px; height:542px">

  <div class="board-area area-top-left" style="width:178px; height:178px">
  </div>
  <div class="board-area area-top-middle" style="width:178px; height:178px">
    <div class="area" style="width:178px; height:178px">
    <div id='cell-0-0' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-0-1' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-0-2' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-0-3' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-0-4' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-0-5' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-0-6' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-0-7' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-0-8' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

</div>
  </div>
  <div class="board-area area-top-right" style="width:178px; height:178px">
    <div class="game-stats" style="font-size:18px">

    <div class="cleared">
      Round: 1
    </div>


  <div class="label-bonus cleared">
    Bonus: 1
  </div>

</div>
  </div>    

  <div class="board-area area-center-left" style="width:178px; height:178px">
    <div class="area" style="width:178px; height:178px">
    <div id='cell-1-0' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-1-1' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-1-2' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-1-3' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-1-4' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-1-5' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-1-6' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-1-7' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-1-8' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

</div>
  </div>
  <div class="board-area area-center" style="width:178px; height:178px">
    <div class="area" style="width:178px; height:178px">
    <div id='cell-4-0' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-4-1' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-4-2' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-4-3' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-4-4' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-4-5' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-4-6' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-4-7' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-4-8' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

</div>
  </div>
  <div class="board-area area-center-right" style="width:178px; height:178px">
    <div class="area" style="width:178px; height:178px">
    <div id='cell-2-0' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-2-1' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-2-2' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-2-3' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-2-4' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-2-5' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-2-6' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-2-7' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-2-8' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

</div>
  </div>

  <div class="board-area area-bottom-left" style="width:178px; height:178px">
    <div id="abilities-left" class="ability-area">
    </div>
  </div>
  <div class="board-area area-bottom-middle" style="width:178px; height:178px">
    <div class="area" style="width:178px; height:178px">
    <div id='cell-3-0' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-3-1' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-3-2' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-3-3' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-3-4' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-3-5' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-3-6' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

    <div id='cell-3-7' data-drag-and-drop-target="cell" class="cell legal"  style="width:57px; height:57px">
</div>

    <div id='cell-3-8' data-drag-and-drop-target="cell" class="cell"  style="width:57px; height:57px">
</div>

</div>
  </div>
  <div class="board-area area-bottom-right" style="width:178px; height:178px">
    <div id="abilities-right" class="ability-area">
    </div> 
  </div>    

</div>
</turbo-frame>    </div>
  </div>

    <div class="outer_center">
      <div class="inner_center">
        <turbo-frame id="dice-box">
          
<div class="outer_center">
  <div class="inner_center">
    <div>

        <div data-drag-and-drop-target="die" class="float die draggable die-1" id="die-0-1" >
          <div class="number">
            <img draggable="false" alt="" src="/assets/dice-default/1-5ae667fb.png" width="53" height="53" />
          </div>
        </div>
        <div data-drag-and-drop-target="die" class="float die draggable die-5" id="die-1-5" >
          <div class="number">
            <img draggable="false" alt="" src="/assets/dice-default/5-932053b4.png" width="53" height="53" />
          </div>
        </div>
        <div data-drag-and-drop-target="die" class="float die draggable die-6" id="die-2-6" >
          <div class="number">
            <img draggable="false" alt="" src="/assets/dice-default/6-fd8cf07c.png" width="53" height="53" />
          </div>
        </div>
        <div data-drag-and-drop-target="die" class="float die draggable die-2" id="die-3-2" >
          <div class="number">
            <img draggable="false" alt="" src="/assets/dice-default/2-4defcbb3.png" width="53" height="53" />
          </div>
        </div>
        <div data-drag-and-drop-target="die" class="float die draggable die-5" id="die-4-5" >
          <div class="number">
            <img draggable="false" alt="" src="/assets/dice-default/5-932053b4.png" width="53" height="53" />
          </div>
        </div>

      </div>
  </div>
</div>
</turbo-frame>      </div>
    </div>

    <turbo-frame id="game-actions">
      <turbo-frame id="game-actions">
    <form class="button_to" method="post" action="/reset"><button data-turbo-stream="true" id="newgame" class="btn btn-primary btn-large game-action-button" type="submit">New Game</button><input type="hidden" name="authenticity_token" value="VpMvFYcKcvWKtuUT4Eg54plJvl6_s7ZZjdM79fzGSClYxGrnmQ-5v7QFXaCoI0miTPL30M7012bHqXLzo9cgLw" autocomplete="off" /></form>

    <button name="button" type="submit" id="undo" class="btn btn-large game-action-button" disabled="disabled">Undo</button>

</turbo-frame>
</turbo-frame>
</turbo-frame>
</template></turbo-stream>
<turbo-stream action="append" target="head"><template>
    <script>
    if (typeof umami !== 'undefined') {
      umami.track('game_start');
    }
  </script>

</template></turbo-stream>