* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

:root {
   block-size: 100dvh;
   inline-size: 100dvw;
   touch-action: none;

   font-family: ui-sans-serif, sans-serif;

   --board-size: 300px;
   --line-width: 6px;
   --line-color: black;
   --square-width: calc((var(--board-size)
                         - 2 * var(--line-width))
                        / 3);
   --stop-1: var(--square-width);
   --stop-2: calc(var(--square-width)
                  + var(--line-width));
   --stop-3: calc(var(--square-width) * 2
                  + var(--line-width));
   --stop-4: calc(var(--square-width) * 2
                  + var(--line-width) * 2);
}

body {
   block-size: 100%;
   inline-size: 100%;
   display: flex;
}

#game-area {
   align-self: center;
   margin-inline: auto;

   display: flex;
   flex-direction: column;
}

#board {
   border: none;
   touch-action: none;
   block-size: var(--board-size);
   inline-size: var(--board-size);
   align-self: center;
   margin-inline: auto;

   display: grid;
   grid-template-rows: repeat(3, 1fr);
   grid-template-columns: repeat(3, 1fr);

   background:
      linear-gradient(
         to bottom,

         transparent
         var(--stop-1),

         var(--line-color)
         var(--stop-1) var(--stop-2),

         transparent
         var(--stop-2) var(--stop-3),

         var(--line-color)
         var(--stop-3) var(--stop-4),

         transparent
         var(--stop-4)),

      linear-gradient(
         to right,

         transparent
         var(--stop-1),

         var(--line-color)
         var(--stop-1) var(--stop-2),

         transparent
         var(--stop-2) var(--stop-3),

         var(--line-color)
         var(--stop-3) var(--stop-4),

         transparent
         var(--stop-4));
}

.square {
   font-size: calc(var(--board-size) / 6);
   font-weight: 500;
   align-content: center;
   text-align: center;
}

#game-chrome-bottom {
   display: flex;
   padding: 0.5em;
}

#new-game-button {
   margin-inline-start: auto;
   visibility: hidden;
}

#button-group {
   position: fixed;
   inset-block: 1em auto;
   inset-inline: auto 1em;

   display: flex;
   flex-direction: column;
   gap: 1em;
   display: none;
}

#borders-toggle-group {
   position: fixed;
   inset-block: auto 1em;
   inset-inline: auto 1em;
   display: none;
}

#output {
   position: fixed;
   inset-block: auto 1em;
   inset-inline: 1em auto;
   max-block-size: calc(100dvh - 2em);
   max-inline-size: calc(50dvw - 1em);
   overflow: scroll;
   display: none;
}