#table_field
{
	grid-area: table_field;
 width: 100%;
 height: 100%;
 aspect-ratio: 1 / 1;
}

#game_table
{
 width: 100%;
 height: 100%; border-collapse: separate;  /* must be separate to allow gaps */
 border-spacing: 4px;       /* the inner gaps */
 background-color: transparent; /* no outer border */
}

td
{
 position: relative;
 background-color: white;      /* cell background */
 aspect-ratio: 1 / 1;
}

/* vertical lines (except last column) */
td:not(:last-child)::after
{
 content: "";
 position: absolute;
 top: 0;
 right: -4px;    /* half gap */
 width: 4px;    /* full gap size */
 height: 100%;
 background-color: darkgrey;
}

/* horizontal lines (except last row) */
tr:not(:last-child) td::before
{
 content: "";
 position: absolute;
 bottom: -4px;   /* half gap */
 left: 0;
 width: 100%;
 height: 4px;   /* full gap size */
 background-color: darkgrey;
}

#game_field[ data-set_argue = "1" ] td:hover
{
 cursor: pointer;
 box-shadow: 0 0 0 3px lightgray inset;
}