#game_02 {
	--table_max_width: 70vw;
	--table_max_height: calc( 87vh - 4.5vh );
	--cell_w_size: calc( var( --table_max_width ) /9 );
	--cell_h_size: calc( var( --table_max_height ) /20 );
	--cell_size: min( var( --cell_h_size ), var( --cell_w_size ) );
	
}

#game_02 table {
	border-collapse: collapse;
}


	#game_02 td {
	
	
width: var( --cell_size );
height: var( --cell_size );
background-color:yellow;
border: 1px solid white
}

.trios_game {
	position: relative; 
 width: 100vw;
  height: 95.5vh;
  display: grid;
  grid-template-columns: calc( var( --cell_size ) * 9 ) auto;
  grid-template-rows: calc( var( --cell_size ) * 20 ) auto;
  grid-template-areas:
  "field info"
  "empty control";
}

#game_02_table_id {
/*	float: left; */
}

#next_figure_id {
	padding-left: 0.5rem;
	
}	

.score_trios_info {
/*	position: absolute;
	top: 0;
	right: 0; */
	width: calc( var( --cell_size ) * 3 ) ;
	height: var( --cell_size );
	background-color: blue;
    text-align:center;
	color: yellow;
	font-size: calc( var( --cell_size ) * 0.75 );
}

.control_pad {
/*	float: left; */
	position: absolute;
	right: 0;
	bottom: 0;
	grid-area: control;
	/*width: 100vw;*/
	display: grid;	
	grid-template-columns: repeat( 2, calc( var(--cell_size ) * 3.9 ) );
	grid-template-rows: repeat( 4, calc( var(--cell_size ) * 2 ) ) calc( var(--cell_size ) * 3 );
	grid-template-areas: 
	"empty pause" "empty ifall" "empty fall" "empty rotate" "left right";
	gap: calc( var( --cell_size ) * 0.25 );
}

.control_pad button {
	height: ;
	width: ;
	font-size: calc( var( --cell_size ) * 0.75 );
	touch-action: manipulation;
}
	
	.control_pad .left_btn {
		grid-area: left;
	}
	
	.control_pad .right_btn {
		grid-area: right;
	}
	
	.control_pad .rotate_btn {
		grid-area: rotate;
	}
	
	.control_pad .fall_btn {
		grid-area: fall;
	}
	
	.control_pad .ifall_btn {
		grid-area: ifall;
	}
	
	.control_pad .pause_btn {
		grid-area: pause;
	}